I am a Text, if you want ro use Flutter to write the text, you have to use me

简介：

Flutter中书写文本的时候Text是一个必不可少的一个组件。

书写了Text发现好多属性，我本来也是不知道有那么多属性，知识笔者去查源码的时候发现的，你也可以尝试一下，如果不会可以留言。

Text的基本用法和基本属性

  1. var _width = ediaQuery.of(context).size.width; // 获取当前屏幕宽度。
  3. Container(
  4.     width: _width,
  5.     height: 100,
  6.     alignment: Alignment.center,
  7.     margin: EdgeInsets.fromLTRB(15, (_height / 2 ) - 100, 15, 0),
  8.     decoration: BoxDecoration(
  9.       color: Colors.green[300],
  10.       borderRadius: BorderRadius.circular(15)
  11.     ),
  12.     child: Text(
  13.       "I am a text, so if you are going to write with a Flutter, you have to use me",
  14.       style: TextStyle(
  15.         inherit: false, // 继承 
  16.         fontSize : 24,  //  字号
  17.         fontWeight: FontWeight.w500, // 字体粗细程度
  18.         fontStyle: FontStyle.italic, // 字体样式 斜体
  19.         fontFamily: "Courier", // 字体
  20.         color: Colors.pink[300], // 字体颜色 默认字体颜色是白色
  21.         backgroundColor: Colors.yellow[200], // 背景颜色
  22.         letterSpacing: 3, // 字体间距
  23.         wordSpacing: 3,  // 词间距
  24.         textBaseline: TextBaseline.alphabetic, // 对齐文本基线
  25.         height: 2,  // 文本的高度，以字体大小的倍数显示。
  26.         shadows: [ Shadow(color : Colors.blue , offset : Offset(6,9) , blurRadius : 0.0) ], // 阴影 
  27.         locale: Locale('fr', "CH"),
  28.         // decoration: TextDecoration.underline, // 装饰 如顶部线条，底部线条
  29.         decoration: TextDecoration.none // 去掉底部双横线
  31.         decorationColor: Colors.black54, // 装饰容器颜色
  32.         decorationStyle: TextDecorationStyle.dashed  , // 实线，虚线，双线等。 
  33.         debugLabel: '',
  34.         package: ""
  35.       ),
  37.       // strutStyle: StrutStyle(
  38.       //   fontFamily : "Courier",
  39.       //   fontSize : 22,
  40.       //   fontWeight : FontWeight.w800  
  41.       // ),
  43.       textAlign: TextAlign.right, // 对齐方式
  45.       textDirection : TextDirection.rtl, // 上所用文本的方向 感觉和对齐方式没有什么区别
  47.       locale: Locale('fr', "CH"), // 这个属性我也不知道有啥用处。
  49.       softWrap: false, // 如果为false，文本中的符号将被定位为没有限制的水平空间。
  51.       overflow: TextOverflow.ellipsis,  // 实现益处打点。
  53.       textWidthBasis:TextWidthBasis.longestLine , 
  55.       textHeightBehavior: TextHeightBehavior(applyHeightToFirstAscent : true),
  57.       textScaleFactor : 1.2 , // 字体放大倍数。
  59.       maxLines: 1,  // 最大的行
  61.     ),
  62.   )

image.png

  • 看上去比较拥挤，下面我们来介绍具体属性吧。
  • 但是上面的属性常用的基本上都覆盖了。要是不想看上面的话，下面还有细分小部分内容讲解。
  • 一般字体显示的样式都是在style内修改。

给字体加下划线

  • 直接粘图吧。
  • 在style样式中添加。

image.pngimage.png

设置文本最多显示多少行。

image.png

设置益处打点

image.png

文本添加阴影

image.png

很多属性不可能全都能记得牢固，所以还是需要查阅源码来解决事情。这才是最快的效率。