Flutter基础-(3)Widget之文本Text-白红宇

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

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

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

在开发中 , 有一些常见的应用场景需要用到富文本 . 比如在很多 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);  @override  DemoTextState createState() {    return new DemoTextState();  }}class DemoTextState extends State
    
      {  @override  Widget 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: 
     
      [            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: 
      
       [                  new TextSpan(                      text: '《从flutter入门到放弃》',                      style: new TextStyle(color: Colors.redAccent),                      recognizer: recognizer),                ],              ),            ),          ],        ));  }}复制代码

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