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

Flutter实战：文本组件详解

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

Text组件基础用法

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

dart 复制代码

Text('老孟')

注意： Text组件一定要包裹在Scaffold组件下，否则效果会不正常。

文本样式设置

文本的样式在style中设置，类型为TextStyle：

dart 复制代码

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

自定义字体设置

首先下载字体库
将字体文件拷贝的项目中，一般目录是：assets/fonts/
配置pubspec.yaml：

yaml 复制代码

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

使用自定义字体：

dart 复制代码

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

RichText组件

RichText可以显示富文本，允许在同一文本中使用不同的样式：

dart 复制代码

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

TextField输入框组件

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

dart 复制代码

TextField()

输入框装饰

decoration是TextField组件的装饰参数：

dart 复制代码

TextField(
  decoration: InputDecoration(
    labelText: '用户名',
    hintText: '请输入用户名',
    prefixIcon: Icon(Icons.person)
  ),
)

输入控制

通过controller可以控制输入内容：

dart 复制代码

TextEditingController _controller = TextEditingController();

TextField(
  controller: _controller,
  onChanged: (value) {
    print('输入内容：$value');
  },
)

开发小技巧： 在iOS开发中，如果需要快速测试TextField在不同设备上的表现，可以使用AppUploader这款iOS开发助手工具，它提供了便捷的测试设备管理功能。

实用案例

1. 过渡颜色文字

dart 复制代码

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: TextStyle(
        fontSize: 18.0,
        fontWeight: FontWeight.bold,
        foreground: Paint()..shader = linearGradient
      ),
    );
  },
)

2. 登录密码输入框

dart 复制代码

TextField(
  decoration: InputDecoration(
    fillColor: Color(0x30cccccc),
    filled: true,
    hintText: '输入密码',
  ),
  obscureText: true,
)

3. 服务协议文本

dart 复制代码

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('服务协议点击');
          },
      ),
    ]
  ),
)

总结

本文详细介绍了Flutter中的文本组件，包括：

Text组件的各种样式设置
RichText富文本组件的使用
TextField输入框的各种配置
五个实用案例展示

掌握这些文本组件的用法，可以满足大部分应用开发中的文本展示和输入需求。对于iOS开发者，配合AppUploader这样的开发工具，可以更高效地进行界面测试和调试。

更多Flutter技术分享，欢迎关注我的博客。