Text Widget

Text Widget

Text 类似于 iOSUILabel 控件,用来显示文本信息。

Text(
    'Text 的使用',
),

运行效果如图:


  • textAlign 文本的对齐方式;可以选择左对齐、右对齐还是居中。注意,对齐的参考系是Text widget本身。本例中虽然是指定了居中对齐,但因为Text文本内容宽度不足一行,Text的宽度和文本内容长度相等,那么这时指定对齐方式是没有意义的,只有Text宽度大于文本内容长度时指定此属性才有意义。

    Text(
        'Text 的使用' * 7, // 字符串重复7次
        textAlign: TextAlign.center,
    ),
    
  • maxLines 指定文本显示的最大行数,默认情况下,文本是自动换行的,如果设置了这个属性,则文本不会超过指定的行数。

    Text(
        'Text 的使用' * 70, // 字符串重复7次
        textAlign: TextAlign.center,
        maxLines: 4,
    ),
    
    image.png
  • overflow 设置这个属性来指定截断方式,默认是直接截断

    • TextOverflow.clip 直接截断
    • TextOverflow.ellipsis 末尾 ... 方式截断
    • TextOverflow.fadeTextOverflow.clip 有点类似,只是在底部有一层阴影效果
    • TextOverflow.visibleTextOverflow.clip一样,暂未发现有什么区别
  • textScaleFactor 代表文本相对于当前字体大小的缩放因子,相对于去设置文本的样式style属性的fontSize,它是调整字体大小的一个快捷方式。该属性的默认值可以通过MediaQueryData.textScaleFactor获得,如果没有MediaQuery,那么会默认值将为1.0

  • style 是利用 TextStyle 去设置文本显示的样式如颜色、字体、粗细、背景等样式

    TextStyle(
            color: Colors.red, // 文字颜色
            fontSize: 18.0, // 字体大小
            height: 1.6, // 行间距
            fontStyle: FontStyle.italic, // 设置字体为斜体
            // backgroundColor: Colors.blueGrey, // 文字背景颜色
            // background: Paint()..color=Colors.blueAccent, // 文字背景颜色,不能跟 backgroundColor 同时设置
            decoration: TextDecoration.underline, // 在文本下面设置下划线
            decorationColor: Colors.blueAccent, // 设置下划线的颜色
            decorationStyle: TextDecorationStyle.double, // 设置下划线为双线
    ),
    
  • 富文本

    Text.rich(
              TextSpan(
                children: [
                  TextSpan(
                    text: '这是富文本第一部分', // 要显示的文本
                    style: TextStyle(
                      fontSize: 16.0, // 字体大小
                      color: Colors.blueGrey, // 字体颜色
                    ),
                  ),
                  TextSpan(
                    text: '富文本第二部分',
                    style: TextStyle(
                      fontSize: 60.0,
                      color: Colors.red,
                      decoration: TextDecoration.underline,
                      decorationStyle: TextDecorationStyle.dashed,
                    ),
                ),
            ],
        ),
        textAlign: TextAlign.center,
    ),
    
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容