Flutter 之 Text 控件

Text 属性

new Text(
         'You have pushed the button this many times:',
          textAlign: TextAlign.center,
          textDirection: TextDirection.ltr, 
          softWrap: false,
          overflow: TextOverflow.ellipsis,
          textScaleFactor: 2.0, 
          maxLines: 10,
         )
  • data,Text 控件的第一个属性,指的是 Text 的文本

  • textAlign:文本对齐方式,分别有:
    TextAlign.left 文本左对齐
    TextAlign.right 文本右对齐
    TextAlign.center 文本居中
    TextAlign.justify 文本两端对齐
    TextAlign.start 同 TextAlign.left
    TextAlign.end 同 TextAlign.right

  • textDirection 文本方向,分别有
    TextDirection.ltr 从左到右
    TextDirection.rtl 从右到左

  • softWrap 是否换行处理,如为 false,超出屏幕做截断处理

  • overflow 文字超出屏幕之后的处理方式
    TextOverflow.clip 截断处理
    TextOverflow.fade 超出透明化
    TextOverflow.ellipsis 省略号处理

  • textScaleFactor 字体缩放大小

  • maxLines 限制行数

  • style 属性

      style: TextStyle(
                inherit: true,
                color: const Color(0xff000000),
                backgroundColor: Colors.white,
                fontSize: 32, 
                fontWeight: FontWeight.w900, 
                fontStyle: FontStyle.italic, 
                letterSpacing: 4.0, 
                wordSpacing: 6.0, 
                textBaseline: TextBaseline.ideographic,
                height: 1,
                locale:const Locale('en', 'US'),
               // foreground: paint,
               // background:paint,
                shadows:[BoxShadow(color: Colors.grey, offset: Offset(-1, -1), blurRadius: 5)],
                decoration:TextDecoration.lineThrough,
                decorationColor:Colors.blue,
                 decorationStyle:TextDecorationStyle.double,
                decorationThickness:2.0,
                debugLabel:"label",
                fontFamily:"DIN_Medium.ttf",
                //fontFamilyFallback:,
                package:"assets/fonts",
              ),
  1. inherit 未设置属性是否继承父节点样式
  2. color 字体颜色
  3. backgroundColor 背景颜色
  4. fontSize 字体大小,单位为 pt 或 sp ,默认 14 sp
  5. fontWeight 字体的粗细,正常 (FontWeight.w400) 和粗体
  6. fontStyle 字体样式,正常和斜体
  7. letterSpacing 字符之间的间距倍数
  8. wordSpacing 单词间隙
  9. textBaseline 对齐表意文字的水平线
  10. height 字体的倍数
  11. locale 多国语言设置
  12. foreground 通过 Paint 来设置字体的颜色,color 和 foreground 不能同时设置
  13. background 通过Paint来设置字体的背景颜色,backgroundColor 和 background 不能同时设置
  14. shadows 文字阴影
  15. decoration TextDecoration.none 没有 TextDecoration.underline 下划线TextDecoration.overline 上划线TextDecoration.lineThrough 中间的线(删除线)
  16. decorationColor 划线的颜色
  17. decorationStyle 划线的样式 TextDecorationStyle.solid 实线 TextDecorationStyle.double 画两条线 TextDecorationStyle.dotted 点线(一个点一个点的)TextDecorationStyle.dashed 虚线(一个长方形一个长方形的线)TextDecorationStyle.wavy 正玄曲线
  18. decorationThickness 划线粗细的宽度
  19. debugLabel 调试标签
  20. fontFamily 字体名称
  21. fontFamilyFallback 文字字体列表,如果前面的 fontFamily 提供了,以fontFamily 为准,如果没有提供,则使用该列表第一个元素作为字体,都没提供则使用默认字体
  22. package 文字字体路径

Text.rich 属性

和Text相比多出一个textSpan

new TextSpan(
                text: 'Hello Flutter',
                style: new TextStyle(
                  color: Colors.black,
                  fontSize: 15.0,
                  decoration: TextDecoration.none,
                ),
                children: [
                  new TextSpan(
                    text: 'TextSpan',
                    style: new TextStyle(
                      color: Colors.blue,
                    ),
                    recognizer:new TapGestureRecognizer()..onTap = () {
                      //点击具体事件处理
                      print("TapGestureRecognizer");
                    }
                  ),
                ],
              ),

这里有个 .. 的 Dart 语法,这是以前没见过的,查看文档,这种叫

Cascade notation (..)(级联操作符)

级联操作符 (..) 可以在同一个对象上 连续调用多个函数以及访问成员变量。 使用级联操作符可以避免创建 临时变量。

Text 点击事件

Text 点击事件需要借助 GestureDetector

new GestureDetector(
              child: new Text(
                '$_counter',
                textAlign: TextAlign.justify,//对齐方式
                textDirection:TextDirection.ltr,
                style: Theme.of(context).textTheme.display1,
              ),
              onTap: ()  {
                print("Text");
              },
            )

这样在 onTap 里面就可以处理点击事件了,另外还有 onDoubleTap 和 onLongPress 等等手势操作事件。

你可能感兴趣的:(Flutter 之 Text 控件)