Flutter实战】文本组件及五大案例

太过爱你忘了你带给我的痛 2023-02-17 02:33 16阅读 0赞

![20200611072130938.png][]

> 老孟导读：大家好，这是【Flutter实战】系列文章的第二篇，这一篇讲解文本组件，文本组件包括文本展示组件（Text和RichText）和文本输入组件（TextField），基础用法和五个案例助你快速掌握。 第一篇链接：[【Flutter实战】移动技术发展史][Flutter]

### Text ###

Text是显示文本的组件，最常用的组件，没有之一。基本用法如下：

Text('老孟')

![20200611072131671.png][]

**注意：Text组件一定要包裹在Scaffold组件下，否则效果如下：**

![20200611072131805.png][]

文本的样式在`style`中设置，类型为`TextStyle`，`TextStyle`中包含很多文本样式属性，下面介绍一些常用的。

设置文本大小和颜色：

Text('老孟',style: TextStyle(color: Colors.red,fontSize: 20),),

![2020061107213240.png][]

上面黑色的字体为没有设置的效果，作为对比。

设置字体粗细：

Text('老孟',style: TextStyle(fontWeight: FontWeight.bold))

![20200611072132203.png][]

字体粗细共有9个级别，为`w100`至`w900`，**FontWeight.bold**是`w700`。

设置斜体：

Text('老孟',style: TextStyle(fontStyle: FontStyle.italic,))

![20200611072132329.png][]

设置自定义的字体：

1.  首先下载字体库（比如中华字体库）
2.  将字体文件拷贝的项目中，一般目录是：assets/fonts/，assets和fonts都需要手动创建，此目录不是必须的，而是约定俗成，资源一般都放在assets目录下。
3.  配置`pubspec.yaml`：

fonts:
      - family: maobi 
        fonts:
          - asset: assets/fonts/maobi.ttf

maobi：是自己对当前字体的命名，有意义即可。

asset：字体文件的目录。

使用：

Text('老孟', style: TextStyle(fontFamily: 'maobi',)),

![20200611072132451.png][]

设置对齐方式：

Container(
      height: 100,
      width: 200,
      color: Colors.blue.withOpacity(.4),
      child: Text('老孟', textAlign: TextAlign.center),
    ),

![20200611072132646.png][]

`textAlign`只是控制水平方向的对齐方式，值说明如下：

*  left：左对齐
 *  right：右对齐
 *  center：居中
 *  justify：两端对齐，此属性中文存在bug（Flutter版本：1.17.3）也可以在[官方issue中关注此问题][issue]
 *  start：前端对齐，和`TextDirection`属性有关，如果设置`TextDirection.ltr`，则左对齐，设置`TextDirection.rtl`则右对齐。
 *  end：末端对齐，和`TextDirection`属性有关，如果设置`TextDirection.ltr`，则右对齐，设置`TextDirection.rtl`则左对齐。

设置文本自动换行：

Container(
      height: 100,
      width: 200,
      color: Colors.blue.withOpacity(.4),
      child: Text('老孟，专注分享Flutter技术和应用实战',softWrap: true,),
    )

![20200611072132835.png][]

文本超出范围时的处理：

Container(
      height: 100,
      width: 200,
      color: Colors.blue.withOpacity(.4),
      child: Text('老孟，专注分享Flutter技术和应用实战',overflow: TextOverflow.ellipsis,),
    )

![20200611072132966.png][]

溢出的处理方式：

*  clip：直接裁剪。
 *  fade：越来越透明。
 *  ellipsis：省略号结尾。
 *  visible：依然显示，此时将会溢出父组件。

设置全局字体样式：

在`MaterialApp`的`theme`中设置如下

MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
       ...
        textTheme: TextTheme(
            bodyText2: TextStyle(color: Colors.red,fontSize: 24),
        )
      ),
      home: Scaffold(
        body: TextDemo(),
      ),
    )

Text组件默认为红色，

Text('老孟'),
    
    Text('老孟',style: TextStyle(color: Colors.blue,fontSize: 20),),

![2020061107213397.png][]

### RichText ###

RichText的属性和Text基本一样，使用如下：

RichText(
      text: TextSpan(
          style: DefaultTextStyle.of(context).style,
          children: <InlineSpan>[
            TextSpan(text: '老孟', style: TextStyle(color: Colors.red)),
            TextSpan(text: '，'),
            TextSpan(text: '专注分享Flutter技术和应用实战'),
          ]),
    )

![20200611072133550.png][]

### TextField ###

TextField是文本输入组件，即输入框，常用组件之一。基本用法：

TextField()

不需要任何参数，一个最简单的文本输入组件就出来了，效果如下：

![20200611072133728.png][]

`decoration`是TextField组件的装饰（外观）参数，类型是InputDecoration。

`icon`显示在输入框的前面，用法如下：

TextField(
      decoration: InputDecoration(
        icon: Icon(Icons.person),
      ),
    )

![20200611072133873.png][]

当输入框是空而且没有焦点时，labelText显示在输入框上边，当获取焦点或者不为空时labelText往上移动一点，`labelStyle`参数表示文本样式，具体参考`TextStyle`， 用法如下：

TextField(
      decoration: InputDecoration(
        labelText: '姓名：',
        labelStyle: TextStyle(color:Colors.red)
      ),
    )

![20200611072134521.png][]

`hasFloatingPlaceholder`参数控制当输入框获取焦点或者不为空时是否还显示`labelText`，默认为true，显示。

`helperText`显示在输入框的左下部，用于提示用户，`helperStyle`参数表示文本样式，具体参考`TextStyle`用法如下：

TextField(
      decoration: InputDecoration(
        helperText: '用户名长度为6-10个字母',
        helperStyle: TextStyle(color: Colors.blue),
        helperMaxLines: 1
      ),
    )

![20200611072134963.png][]

`hintText`是当输入框为空时的提示，不为空时不在显示，用法如下：

TextField(
      decoration: InputDecoration(
        hintText: '请输入用户名',
        hintStyle: TextStyle(color: Colors.grey),
        hintMaxLines: 1
      ),
    )

![20200611072135169.png][]

`errorText`显示在输入框的左下部，默认字体为红色，用法如下：

TextField(
      decoration: InputDecoration(
        errorText: '用户名输入错误',
        errorStyle: TextStyle(fontSize: 12),
        errorMaxLines: 1,
        errorBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.red)),
      ),
    )

![20200611072135340.png][]

`prefix`系列的组件是输入框前面的部分，用法如下：

TextField(
      decoration: InputDecoration(
        prefixIcon: Icon(Icons.person)
      ),
    )

![20200611072135484.png][]

注意prefix和icon的区别，icon是在输入框边框的外部，而prefix在里面。

suffix和prefix相反，suffix在输入框的尾部，用法如下：

TextField(
      decoration: InputDecoration(
          suffixIcon: Icon(Icons.person)
      ),
    )

![20200611072135844.png][]

`counter`组件统计输入框文字的个数，counter仅仅是展示效果，不具备自动统计字数的功能， 自动统计字数代码如下：

![20200611072140143.png][]

`filled`为true时，输入框将会被`fillColor`填充，仿QQ登录输入框代码如下：

Container(
      height: 60,
      width: 250,
      child: TextField(
        decoration: InputDecoration(
          fillColor: Color(0x30cccccc),
          filled: true,
          enabledBorder: OutlineInputBorder(
              borderSide: BorderSide(color: Color(0x00FF0000)),
              borderRadius: BorderRadius.all(Radius.circular(100))),
          hintText: 'QQ号/手机号/邮箱',
          focusedBorder: OutlineInputBorder(
              borderSide: BorderSide(color: Color(0x00000000)),
              borderRadius: BorderRadius.all(Radius.circular(100))),
        ),
      ),
    )

![20200611072140371.png][]

`controller`是输入框文本编辑的控制器，可以获取TextField的内容、设置TextField的内容，下面将输入的英文变为大写：

TextEditingController _controller;
    
    @override
    void initState() {
      super.initState();
      _controller = TextEditingController()
        ..addListener(() {
          //获取输入框的内容，变为大写
          _controller.text = _controller.text.toUpperCase();
    
        });
    }
    
    @override
    Widget build(BuildContext context) {
      return TextField(
        controller: _controller,
      );
    }
    
    @override
    dispose() {
      super.dispose();
      _controller.dispose();
    }

有时输入框后面带有“清除”功能，需要controller来实现。如果需要2个TextField的内容进行同步，只需要给2个TextField设置同一个controller即可实现。

`keyboardType`参数控制软键盘的类型，说明如下：

*  text：通用键盘。
 *  multiline：当TextField为多行时（maxLines设置大于1），右下角的为“换行” 按键。
 *  number：数字键盘。
 *  phone：手机键盘，比数字键盘多"\*"和 "\#"。
 *  datetime：在ios上和text一样，在android上出现数字键盘、":"和 "-"。
 *  emailAddress：邮箱键盘，有"@" 和 "."按键。
 *  url：url键盘，有"/" 和 "."按键。
 *  visiblePassword：既有字幕又有数字的键盘。

`textInputAction`参数控制软键盘右下角的按键，说明如下：

*  none：android上显示返回键，ios不支持。
 *  unspecified：让操作系统自己决定哪个合适，一般情况下，android显示“完成”或者“返回”。
 *  done：android显示代表“完成”的按钮，ios显示“Done”（中文：完成）。
 *  go：android显示表达用户去向目的地的图标，比如向右的箭头，ios显示“Go”（中文：前往）。
 *  search：android显示表达搜索的按钮，ios显示"Search"（中文：搜索）。
 *  send：android显示表达发送意思的按钮，比如“纸飞机”按钮，ios显示"Send"（中文：发送）。
 *  next：android显示表达“前进”的按钮，比如“向右的箭头”,ios显示"Next"（中文：下一项）。
 *  previous：android显示表达“后退”的按钮，比如“向左的箭头”,ios不支持。
 *  continueAction：android 不支持，ios仅在ios9.0+显示"Continue"（中文：继续）。
 *  join：Android和ios显示"Join"（中文：加入）。
 *  route：android 不支持，ios显示"Route"（中文：路线）。
 *  emergencyCall：android 不支持，ios显示"Emergency Call"（中文：紧急电话）。
 *  newline：android显示表达“换行”的按钮，ios显示”换行“。

大家可能发现了，Android上显示的按钮大部分是不确定的，比如`next`有的显示向右的箭头，有的显示前进，这是因为各大厂商对Android ROM定制引发的。

`textCapitalization`参数是配置键盘是大写还是小写，仅支持键盘模式为`text`，其他模式下忽略此配置，说明如下：

*  words：每一个单词的首字母大写。
 *  sentences：每一句话的首字母大写。
 *  characters：每个字母都大写
 *  none：都小写

这里仅仅是控制软键盘是大写模式还是小写模式，你也可以切换大小写，系统并不会改变输入框内的内容。

`textAlignVertical`表示垂直方向的对齐方式，`textDirection`表示文本方向，用法如下：

TextField(
      textAlignVertical: TextAlignVertical.center,
      textDirection: TextDirection.rtl,
    )

`toolbarOptions`表示长按时弹出的菜单，有`copy`、`cut`、`paste`、`selectAll`，用法如下：

TextField(
      toolbarOptions: ToolbarOptions(
        copy: true,
        cut: true,
        paste: true,
        selectAll: true
      ),
    )

`cursor`表示光标，用法如下：

TextField(
      showCursor: true,
      cursorWidth: 3,
      cursorRadius: Radius.circular(10),
      cursorColor: Colors.red,
    )

效果如下：

![20200611072141704.png][]

将输入框设置为密码框，只需`obscureText`属性设置true即可，用法如下：

TextField(
      obscureText: true,
    )

通过`inputFormatters`可以限制用户输入的内容，比如只想让用户输入字符，设置如下：

TextField(
      inputFormatters: [
        WhitelistingTextInputFormatter(RegExp("[a-zA-Z]")),
      ],
    )

这时用户是无法输入数字的。

`onChanged`是当内容发生变化时回调，`onSubmitted`是点击回车或者点击软键盘上的完成回调，`onTap`点击输入框时回调，用法如下：

TextField(
      onChanged: (value){
        print('onChanged:$value');
      },
      onEditingComplete: (){
        print('onEditingComplete');
      },
    
      onTap: (){
        print('onTap');
      },
    )

输入框右下角经常需要字数统计，除了使用上面介绍的方法外，还可以使用`buildCounter`，建议使用此方法，用法如下：

TextField(
      maxLength: 100,
      buildCounter: (
        BuildContext context, {
        int currentLength,
        int maxLength,
        bool isFocused,
      }) {
        return Text(
          '$currentLength/$maxLength',
        );
      },
    )

动态获取焦点

FocusScope.of(context).requestFocus(_focusNode);

`_focusNode`为TextField的focusNode：

_focusNode = FocusNode();
    
    TextField(
        focusNode: _focusNode,
        ...
    )

动态失去焦点

_focusNode.unfocus();

### 过渡颜色的文字 ###

Builder(
      builder: (BuildContext context) {
        RenderBox box = context.findRenderObject();
        final Shader linearGradient = LinearGradient(
          colors: <Color>[Colors.purple, Colors.blue],
        ).createShader(
            Rect.fromLTWH(0.0, 0.0, box?.size?.width, box?.size?.height));
    
        return Text(
          '老孟，专注分享Flutter技术和应用实战',
          style: new TextStyle(
              fontSize: 18.0,
              fontWeight: FontWeight.bold,
              foreground: Paint()..shader = linearGradient),
        );
      },
    )

![20200611072141881.png][]

`Builder`组件是为了计算当前Text组件大小，生成LinearGradient。

### 带前后置标签的文本 ###

RichText(
      text: TextSpan(
          style: DefaultTextStyle.of(context).style,
          children: <InlineSpan>[
            WidgetSpan(
                child: Container(
                  margin: EdgeInsets.only(right: 10),
                  padding: EdgeInsets.symmetric(horizontal: 10),
                  decoration: BoxDecoration(
                      shape: BoxShape.rectangle,
                      borderRadius: BorderRadius.all(Radius.circular(20)),
                      color: Colors.blue),
                  child: Text(
                    '判断题',
                    style: TextStyle(color: Colors.white),
                  ),
                )),
            TextSpan(text: '泡沫灭火器可用于带电灭火'),
    
          ]),
    )

![202006110721428.png][]

### “服务协议” ###

通常在登录页面的底部会出现**登录即代表同意并阅读 《服务协议》**，其中**《服务协议》**为蓝色且可点击：

Text.rich(
      TextSpan(
          text: '登录即代表同意并阅读',
          style: TextStyle(fontSize: 11, color: Color(0xFF999999)),
          children: [
            TextSpan(
              text: '《服务协议》',
              style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),
              recognizer: TapGestureRecognizer()
                ..onTap = () {
                  print('onTap');
                },
            ),
          ]),
    )

![20200611072142207.png][]

### 登录密码输入框 ###

TextField(
      decoration: InputDecoration(
        fillColor: Color(0x30cccccc),
        filled: true,
        enabledBorder: OutlineInputBorder(
            borderSide: BorderSide(color: Color(0x00FF0000)),
            borderRadius: BorderRadius.all(Radius.circular(100))),
        hintText: '输入密码',
        focusedBorder: OutlineInputBorder(
            borderSide: BorderSide(color: Color(0x00000000)),
            borderRadius: BorderRadius.all(Radius.circular(100))),
    
      ),
      textAlign: TextAlign.center,
      obscureText: true,
      onChanged: (value) {
    
      },
    )

![20200611072142530.png][]

### 评论回复 ###

Text.rich(
      TextSpan(
          text: '回复',
          style: TextStyle(fontSize: 11, color: Color(0xFF999999)),
          children: [
            TextSpan(
              text: '@老孟：',
              style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),
              recognizer: TapGestureRecognizer()
                ..onTap = () {
                  print('onTap');
                },
            ),
            TextSpan(
              text: '你好，想知道Flutter发展前景如何？',
            ),
          ]),
    )

![20200611072143410.png][]

## 交流 ##

老孟Flutter博客地址（330个控件用法）：[http://laomengit.com][http_laomengit.com]

欢迎加入Flutter交流群（微信：laomengit）、关注公众号【老孟Flutter】：

[20200611072130938.png]: https://img-blog.csdnimg.cn/20200611072130938.png
[Flutter]: https://juejin.im/post/5edec7c7f265da771b2fee5b
[20200611072131671.png]: https://img-blog.csdnimg.cn/20200611072131671.png
[20200611072131805.png]: https://img-blog.csdnimg.cn/20200611072131805.png
[2020061107213240.png]: https://img-blog.csdnimg.cn/2020061107213240.png
[20200611072132203.png]: https://img-blog.csdnimg.cn/20200611072132203.png
[20200611072132329.png]: https://img-blog.csdnimg.cn/20200611072132329.png
[20200611072132451.png]: https://img-blog.csdnimg.cn/20200611072132451.png
[20200611072132646.png]: https://img-blog.csdnimg.cn/20200611072132646.png
[issue]: https://github.com/flutter/flutter/issues/35734
[20200611072132835.png]: https://img-blog.csdnimg.cn/20200611072132835.png
[20200611072132966.png]: https://img-blog.csdnimg.cn/20200611072132966.png
[2020061107213397.png]: https://img-blog.csdnimg.cn/2020061107213397.png
[20200611072133550.png]: https://img-blog.csdnimg.cn/20200611072133550.png
[20200611072133728.png]: https://img-blog.csdnimg.cn/20200611072133728.png
[20200611072133873.png]: https://img-blog.csdnimg.cn/20200611072133873.png
[20200611072134521.png]: https://img-blog.csdnimg.cn/20200611072134521.png
[20200611072134963.png]: https://img-blog.csdnimg.cn/20200611072134963.png
[20200611072135169.png]: https://img-blog.csdnimg.cn/20200611072135169.png
[20200611072135340.png]: https://img-blog.csdnimg.cn/20200611072135340.png
[20200611072135484.png]: https://img-blog.csdnimg.cn/20200611072135484.png
[20200611072135844.png]: https://img-blog.csdnimg.cn/20200611072135844.png
[20200611072140143.png]: https://img-blog.csdnimg.cn/20200611072140143.png
[20200611072140371.png]: https://img-blog.csdnimg.cn/20200611072140371.png
[20200611072141704.png]: https://img-blog.csdnimg.cn/20200611072141704.png
[20200611072141881.png]: https://img-blog.csdnimg.cn/20200611072141881.png
[202006110721428.png]: https://img-blog.csdnimg.cn/202006110721428.png
[20200611072142207.png]: https://img-blog.csdnimg.cn/20200611072142207.png
[20200611072142530.png]: https://img-blog.csdnimg.cn/20200611072142530.png
[20200611072143410.png]: https://img-blog.csdnimg.cn/20200611072143410.png
[http_laomengit.com]: http://laomengit.com