美文网首页
Flutter(十)基础控件-Text

Flutter(十)基础控件-Text

作者: 学_iOS | 来源:发表于2021-12-20 16:33 被阅读0次

    感君一回顾,思君朝与暮。

    <一>Text类似iOS中的UILabel控件

    Text 属性 介绍
    style TextStyle 对象,最常用属性,详情见下方表格
    strutStyle 字体在文本内的一些偏移,使用时 style 属性必须有值,很少使用
    textAlign 对齐方式:left、start、right、end、center、justify
    textDirection TextDirection.ltr:从左到右、TextDirection.rtl:从右到左
    locale 区域设置,基本不会用
    softWrap 是否自动换行
    overflow 超出部分截取方式,clip->直接截取,fade->渐隐,ellipsis->省略号
    textScaleFactor 字体缩放
    maxLines 最多显示行数
    semanticsLabel 语义标签,如文本为"$$",这里设置为"双美元"
    textWidthBasis 测量行宽度
    textHeightBehavior 官方备注: 定义如何应用第一行的ascent和最后一行的descent

    TextStyle属性

    TextStyle 属性 介绍
    inherit 是否继承父类
    color 字体颜色
    backgroundColor 背景色
    fontSize 字体大小
    fontWeight 字体加粗
    fontStyle 系统字体
    fontFamily 字体
    letterSpacing 字母间距
    wordSpacing 单词间距
    textBaseline 字体基线,有兴趣的可以单独了解,flex 布局中会有一种baseline,不常用
    height 高度
    locale 区域设置
    foreground 前置层
    background 背景层
    shadows 阴影
    fontFeatures 指定字体的多种变体
    decoration 文字划线:上,中,下
    decorationColor 划线颜色
    decorationStyle 划线样式:虚线,单线,双线
    decorationThickness 线宽,默认1.0
    debugLabel 仅在 debug 模式下有用

    <二>#代码

    • 正常文本
      Text _normalText(){
      return const Text(
        "Hello World",
        textDirection: TextDirection.ltr,
        textAlign: TextAlign.center,
        softWrap: true,
        maxLines: 2,
        overflow: TextOverflow.ellipsis,
        style: TextStyle(
          fontSize: 50,
          color: Colors.red,
          decoration: TextDecoration.underline,
          decorationColor: Colors.yellow,
          decorationStyle: TextDecorationStyle.double,
        ),
      );
      }
      
    • 富文本
      Text _richText(){
        return Text.rich(
          TextSpan(
            text: "Just ",
            style: const TextStyle(
              fontSize: 30,
            ),
            children: [
              TextSpan(
                text: "taps here",
                style: TextStyle(
                    fontSize: 40,
                    color: Colors.blue
                ),
                recognizer: TapGestureRecognizer()
                  ..onTap = (){
                    print("点击了");
                  }
                ,
              ),
              const TextSpan(
                text: " one more time",
              ),
            ],
          ),
        );
      }
      

    相关文章

      网友评论

          本文标题:Flutter(十)基础控件-Text

          本文链接:https://www.haomeiwen.com/subject/nhhzfrtx.html