Flutter - Text Wigdet （1）

Screenshot_1589034997.png

import 'package:flutter/material.dart';

void main () {
  runApp(myApp()); // 主入口
}

class myApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title:'Text Widget', 
      // 脚手架
      home:Scaffold( 
        body:Center(
          // Text Widgit
          child:Text(
          'hello xzp! 一起来学习这个Flutter吧', // 文本内容
          textAlign: TextAlign.center, // 文本对齐方式
          maxLines: 1, // 文本最大展示行数
          overflow: TextOverflow.ellipsis, // 文本溢出处理方式
          style: TextStyle(
           fontSize: 20.0,  // 文本字体大小
           color: Color.fromARGB(255,255, 120, 30), // 文本颜色
           decoration: TextDecoration.underline, // 线条
           decorationStyle: TextDecorationStyle.dashed // 线条类型
          )),
        )
      )
    );
  }
}

Text Widget

是我学习的第一个组件，记录一下吧

textAlign 文本的对齐方式

例：TextAlign.center 

center:   文本居中对齐
left:     文本左对齐
right :   文本右对齐
start:    以文本开始位置进行对齐，类似于左对齐
end:      以文本结尾处进行对齐，类似右对齐

maxLines 文本最大行数

例：maxLines: 1

overflow 文本溢出时的处理方式

例：TextOverflow.ellipsis
clip：      直接切断，剩下的文字就没有了。
ellipsis：  在后边显示省略号。
fade：      溢出的部分会进行一个渐变消失的效果。

style 文本属性 （设置文本的颜色，字号，字体等属性）

例：
    fontSize: 20.0,  // 文本字体大小
    color: Color.fromARGB(255,255, 120, 30), // 文本颜色
    decoration: TextDecoration.underline, // 线条
    decorationStyle: TextDecorationStyle.dashed // 线条类型