Flutter基建 - 文本组件

本篇基于Flutter 3.13.9，Dart 3.1.5版本

Flutter 3.13.9 • channel stable • github.com/flutter/flu...

Framework • revision d211f42860 (2 weeks ago) • 2023-10-25 13:42:25 -0700

Engine • revision 0545f8705d

Tools • Dart 3.1.5 • DevTools 2.25.0

本篇为Flutter基建的第三篇文章，前面我们了解了Dart中基础类型、方法和类，从此篇文章开始我们就开始逐渐了解Flutter组件知识，剩余的Dart知识我们会在后续的文章中一并提到，这样可以更完整的掌握相关知识，下面我们开始进入Flutter本文组件的知识系统💪💪。

系列文章

Flutter基建 - Dart基础类型

Flutter基建 - Dart方法和类

Flutter基建 - 文本组件

Text文本组件

文本组件在日常开发中应该是频率最高的一种了，也是入门学习组件的最好途径，下面我们来看看Text的使用。

Text纯文本

less 复制代码

body: const Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text("Hello Flutter Text Align Start"),
    Text(
      "Hello Flutter Text Align Start",
      style: TextStyle(
        color: Colors.red,
        fontSize: 18,
      ),
    ),
    Text(
        "Hello Flutter Text Align Start",
        style: TextStyle(
          color: Colors.red,
          fontSize: 18,
          decoration: TextDecoration.underline,
          decorationStyle: TextDecorationStyle.solid,
        ),
    ),
    Text(
      "Text Align Center Text Align Center Text Align Center Text Align Center Text Align Center",
      textAlign: TextAlign.center,
    ),
    Text(
      "Text Align Center maxLines Text Align Center maxLines Text Align Center maxLines Text Align Center maxLines",
      textAlign: TextAlign.center,
      maxLines: 1,
    ),
    Text(
      "Text Align Center ellipsis Text Align Center ellipsis Text Align Center ellipsis Text Align Center",
      textAlign: TextAlign.center,
      overflow: TextOverflow.ellipsis,
    ),
  ],

上面代码我们写了五种样式的Text，基本上涵盖了日常开发使用的知识点，我们逐一学习下它的属性：

Text组件构造方法中只有一个必传参数，为data参数，也就是需要显示的内容，其余参数都是可选参数；
style参数是用于提供文本样式，可设置以下属性：

- color：文本颜色
- backgroundColor：背景颜色
- fontSize：字体大小
- fontWeight：字体行高，可设置粗体属性
- fontStyle：字体样式，可设置斜体属性
- height：文本高度，它只是影响高度的一个因素，最终的行高取决于fontSize和height
- decoration：可设置下划线等属性
- decorationStyle：可针对于decoration做属性调整，例如实线、虚线、双实线等
- 等等，其余属性这里就多说了

textStyle参数可设置文本对齐方式属性，有左对齐、右对齐和居中对齐等
maxLines参数可设置文本最大行数，行数超过最大值就会被截断
overFlow参数设置的是超出最大行数之后溢出的处理方式，比如常见的超出显示...这种效果就可用OverFlow.ellipsis设置

以上就是Text文本组件的大致内容，Flutter除了可以使用Text显示单纯文本外，还提供了Text.rich()来实现富文本的效果。

Text.rich富文本

less 复制代码

late TapGestureRecognizer recognizer;

@override
void initState() {
  super.initState();
  recognizer = TapGestureRecognizer();
  recognizer.onTap = () {
    print('rich text onTap');
  };
}

Text.rich(
  TextSpan(
    children: [
      const TextSpan(text: "Hello Flutter Rich Text "),
      TextSpan(
        text: "https://flutter.cn/",
        style: const TextStyle(color: Colors.red),
        recognizer: recognizer,
      ),
    ],
  ),
)

上面通过Text.rich()就可以很便捷的实现富文本效果，rich函数内有一个必传参数是textSpan，它就是类似于Android原生的SpannableString，但是在用法上面个人感觉比SpannableString要更简洁一点，TextSpan接受一个children参数，可以传入多个组件，并且每个组件都可以自定义一些手势事件，这里我们采用的是TapGestureRecognizer事件，然后在单机回调中进行了日志的输出，实际开发中我们就可以通过此事件进行WebView的跳转。

了解了文本组件之后，我们接下来继续学习下输入框TextFiled组件的相关知识。

TextFiled输入框组件

简单的输入框

scss 复制代码

late TextEditingController controller;

@override
void initState() {
  super.initState();
  controller = TextEditingController();
  controller.addListener(() {});
}

Widget normalTextFiled() {
  return TextField(
    decoration: const InputDecoration(
      labelText: 'UserName',
      hintText: 'Please Input UserName',
      prefixIcon: Icon(Icons.person_2),
    ),
    controller: controller,
  );
}

通过TextFiled组件我们就可以实现上图中输入框的效果，decoration是一个InputDecoration类型的参数，它可以帮助我们控制输入框的提示文本、标签文本、前面的Icon等效果。

controller看名字就是用于输入框的控制效果，我们可以利用它的addListener方法实时监听输入内容的变化，并且还可以通过controller.selection设置光标的位置，也可以通过controller.value和text获取输入的内容，下面介绍下value和text的区别：

value获取的其实是TextEditingValue对象，然后通过TextEditingValue可以获取text输入内容和selection光标信息；
text则直接获取到的是输入的内容

二者都是可以达到获取输入内容的效果，大家可以按需使用。

TextFiled还有个很好用的参数就是autofocus，表示是否自动获取到焦点，如果我们设置了true，那么在打开当前页面的时候就会自动帮助我们将键盘唤起。

除了还用controller.addListener来实时获取输入框文本之后，TextFiled有一个参数onChanged也是为了实时回调输入内容的，它会直接将输入框内容以String的形式回调给我们，我们无需再通过controller获取一遍。

了解了基本的使用方法之后，下面我们再来看看如何给输入框添加一个边框～

输入框边框效果

less 复制代码

Widget borderTextFiled() {
  return TextField(
    decoration: const InputDecoration(
      labelText: 'UserName',
      hintText: 'Please Input UserName',
      prefixIcon: Icon(Icons.person_2),
      border: OutlineInputBorder(),
    ),
    controller: controller,
  );
}

这里使用border参数简单的给输入框添加了一个OutlineInputBorder，这是Flutter自带的一种边框效果，除了border绘制正常的边框之后，还可以使用disableBorder、enabledBorder、errorBorder、focusedBorder和focusedErrorBorder给输入框添加各种状态下的边框，在这一方面可以说给开发者节省了很大一部分的开发量哦。

输入框错误提示

输入框的错误提示大家在日常开发中应该是避免不了的一点，当用户输入的内容不符合指定规则之后，一般都会采用显眼的文本提示或者Toast来告知用户，在TextFiled中我们可以通过decoration中error来帮助自己完成错误提示。

less 复制代码

Widget borderTextFiled() {
  return TextField(
    decoration: const InputDecoration(
      labelText: 'UserName',
      hintText: 'Please Input UserName',
      prefixIcon: Icon(Icons.person_2),
      border: OutlineInputBorder(),
      errorText: 'Input Error',
      errorStyle: TextStyle(color: Colors.red),
    ),
    controller: controller,
  );
}

TextFiled通过上面的errorText和errorStyle结合就可以完成错误文本的展示，Flutter中错误提示默认位置位于输入框的下方，如果你觉得默认的errorText不符合要求，也可以通过error参数自定义组件，两种方式都可以帮助我们完成错误提示组件的展示。

写在最后

本篇文章主要介绍了Flutter组件中最基本的文本和输入框组件的相关知识，希望可以帮助大家了解和巩固下Flutter组件的基础知识，后续会循序渐进逐步接触Flutter更多的知识。

我是Taonce，如果觉得本文对你有所帮助，帮忙关注、赞或者收藏三连一下，谢谢😆😆～