本篇根据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纯文本

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,
    ),
  ],

Flutter基建 - 文本组件

上面代码咱们写了五种款式的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富文本

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,
      ),
    ],
  ),
)

Flutter基建 - 文本组件

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

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

TextFiled输入框组件

简略的输入框

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,
  );
}

Flutter基建 - 文本组件

Flutter基建 - 文本组件

经过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获取一遍。

了解了基本的运用办法之后，下面咱们再来看看如何给输入框增加一个边框～

输入框边框作用

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

Flutter基建 - 文本组件

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

输入框过错提示

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

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,
  );
}

Flutter基建 - 文本组件

TextFiled经过上面的errorText和errorStyle结合就能够完结过错文本的展示，Flutter中过错提示默许位置位于输入框的下方，如果你觉得默许的errorText不符合要求，也能够经过error参数自定义组件，两种方法都能够帮助咱们完结过错提示组件的展示。

写在最终

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

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