Flutter - 文本及样式 Text , TextStyle , DefaultTextStyle ,TextSpan

90 阅读1分钟
Column(

          crossAxisAlignment: CrossAxisAlignment.start,

          children: <Widget>[
            Row(
              mainAxisSize: MainAxisSize.max,
              children:   <Widget>[
                Text("hello world",
                  textAlign: TextAlign.left, // 对齐的目标是自己本身,超一行之后效果比较明显
                  maxLines: 2, // 最大行数
                  overflow: TextOverflow.ellipsis, // 超出最大行数后 ,多余部分用省略号代替
                  textScaleFactor: 1.5, // 字体缩放比例
                  style:TextStyle( // 字体样式
                    color: Colors.yellow,  // 字体颜色
                    fontSize: 18.0 ,// 字体大小
                    height:1.2 , // 行高系数  ,最后高度为  字体大小 * 行高系数
                    fontFamily: "Courier" ,// 字体类型
                    background: Paint()..color = Colors.black , // 字体背景颜色
                    decoration: TextDecoration.lineThrough,
                    // 给文本画一条装饰线 lineThrough 删除线 overline 上划线 underline 下划线  none 不画线
                    decorationStyle: TextDecorationStyle.dashed,
                    // 画线的类型  solid  实线   double 两条线  dotted 画圆点虚线 dashed 画破折号虚线  wavy  画波浪线
                  )
                ),
              ],
            ),
            Row(
              mainAxisSize: MainAxisSize.max,
              children:  const <Widget>[
                Text.rich(TextSpan( // Text本身是一个RichText的一个包装 ,可以通过Text.rich 方法将TextSpan 添加到 Text 中
                  children: [ // TextSpan 中可以嵌套多个 TextSpan
                    TextSpan(
                      text: "Home: "  //文本显示
                    ),
                    TextSpan(
                      text:"https://flutterchina,club",
                      style: TextStyle(  // textSpan中文字的样式
                        color: Colors.blue
                      ),
                      // recognizer: _tapRecognizer   点击事件
                    )
                  ]
                ))

              ],
            ),
            Row(
              children:  <Widget>[
                //在 Widget 树中,文本的样式默认是可以被继承的 而DefaultTextStyle正是用于设置默认文本样式的
                DefaultTextStyle(style:
                  //1.设置文本默认样式
                  const TextStyle(
                    color:Colors.red,
                    fontSize: 20.0,
                  ),
                    child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: const <Widget>[
                      Text("Hello World"),
                      Text("I am Jack"),
                      Text("I am Jack",
                        style: TextStyle(
                          inherit: false,
                          color: Colors.grey
                        ),),
                    ],
                ))
              ],
            ),
          ],
        )