本来打算第三篇文章来讲解 Flutter 单子布局widget , 奈何 18种单子布局widget 内容颇多,加之年后有了新项目要开发 , 使得文章产出周期被拉长 :( . 这里先来篇简单的关于Text的文章 , 下次更新将会发出 Flutter系列的目录及布局widget的文章.

Text

Text 文本是app里常见的控件 , 用以显示一串单一样式的文本 . 该字符串可跨越多行 , 或根据布局约束显示在同一行中

最简单的可以直接用这样的代码来展示文本 , 类似 Android 里的 TextView , iOS 里的 UILabel .

new Text('简单的文本')
复制代码

代码未指定样式 , 此时将使用最近的 DefaultTextStyle 样式 . 若给定样式中 TextStyle.inherit 属性为true , 给定样式则将与最近的 DefaultTextStyle 样式合并 .

类似 Android 里 , style.xml 主题样式 AppTheme 中定义了文本样式 , 并且将其设置为 Application 的主题样式 , 那么新建一个 TextView 就会默认使用 AppTheme中定义的文本样式 , 而当给这个 TextView 设置样式时,此样式就会和主题样式进行合并

当 TextStyle.inherit 属性设置为 false 时 , 文本样式会恢复到默认状态: 白色, 10像素 , sans-serif 字体

final TextStyle _inheritBigFont = new TextStyle(inherit: true, fontSize: 24.0);
final TextStyle _notInheritBigFont = new TextStyle(inherit: false, fontSize: 24.0);
...
new Text('inherit true', style: widget._inheritBigFont)
new Text('inherit false', style: widget._notInheritBigFont)
复制代码

文本样式鸟瞰

RichText

要显示多样式的文本 , 需要使用富文本 RichText

在开发中 , 有一些常见的应用场景需要用到富文本 . 比如在很多 app 注册 ,开户界面会有一个同意协议的模块 ,

我已阅读并同意《xxx协议》 , 协议名称通常高亮显示并且可以点击打开协议页面 .

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';class DemoText extends StatefulWidget {final TextStyle _protocolFont = new TextStyle(fontSize: 16.0);final TextStyle _inheritBigFont =new TextStyle(inherit: true, fontSize: 24.0);final TextStyle _notInheritBigFont =new TextStyle(inherit: false, fontSize: 24.0);@overrideDemoTextState createState() {return new DemoTextState();}
}class DemoTextState extends State<DemoText> {@overrideWidget build(BuildContext context) {return new Scaffold(appBar: new AppBar(title: const Text('Text Demo'),),body: new Builder(builder: builderBody));}Widget builderBody(BuildContext context) {final TapGestureRecognizer recognizer = new TapGestureRecognizer();recognizer.onTap = () {Scaffold.of(context).showSnackBar(new SnackBar(content: new Text('协议被点击!'),));};final Divider divider = new Divider(color: Colors.white, height: 2.0);return new Container(color: Colors.grey,alignment: Alignment.center,child: new Column(children: <Widget>[new Text('inherit true', style: widget._inheritBigFont),new Text('inherit false', style: widget._notInheritBigFont),divider,new Text('龙骑士囧雪诺JohnSnow',style: new TextStyle(color: Colors.blue,fontSize: 24.0,fontStyle: FontStyle.italic,letterSpacing: 2.0,decoration: TextDecoration.underline),),divider,new RichText(text: new TextSpan(text: '我已阅读',style: widget._protocolFont,children: <TextSpan>[new TextSpan(text: '《从flutter入门到放弃》',style: new TextStyle(color: Colors.redAccent),recognizer: recognizer),],),),],));}
}
复制代码

TapGestureRecognizer 是手势识别者 , 后面讲到手势时再具体说明 . 这里我们先知道它可以用来给富文本某一段添加点击事件 . 这里我们点击协议后 , 会弹出一个SnackBar提示协议被点击了 .