Flutter问题记录 - TextField组件多行提示文本显示不全

超、凢脫俗 2024-05-24 21:39 12阅读 0赞

#### 文章目录 ####

*  前言
 *  开发环境
 *  问题描述
 *  问题分析
 *  解决方案
 *  最后

--------------------

## 前言 ##

梳理Flutter项目的过程中发现还有一些遗留的`TODO`没处理，其中有一个和`TextField`组件相关。

## 开发环境 ##

*  Flutter: 3.10.1
 *  Dart: 3.0.1

## 问题描述 ##

`TextField`组件设置`maxLines: null`不限制行数，同时设置多行提示文本`hintText`：

TextField(
      maxLines: null,
      decoration: InputDecoration(
        hintText: 'Text that suggests what sort of input the field accepts.' * 5,
        border: InputBorder.none,
      ),
    );

提示文本显示不全只显示一行：

![screenshot1][]

## 问题分析 ##

首先确定是不是因为没有设置`hintMaxLines`属性的原因导致的问题：

TextField(
      maxLines: null,
      decoration: InputDecoration(
        hintText: 'Text that suggests what sort of input the field accepts.' * 5,
        hintMaxLines: null,
        border: InputBorder.none,
      ),
    );

重新运行还是显示不全。找到`hintMaxLines`的定义：

/// The maximum number of lines the [hintText] can occupy.
    ///
    /// Defaults to the value of [TextField.maxLines] attribute.
    ///
    /// This value is passed along to the [Text.maxLines] attribute
    /// of the [Text] widget used to display the hint text. [TextOverflow.ellipsis] is
    /// used to handle the overflow when it is limited to single line.
    final int? hintMaxLines;

从文档注释看，确实不用设置`hintMaxLines`属性也可以，默认等于`TextField`组件的`maxLines`，相关代码位于`_TextFieldState`类的`_getEffectiveDecoration`方法。不过，文档中出现了`TextOverflow.ellipsis`，这难道和这篇文章[Flutter问题记录 - Text组件设置不限行数无效][Flutter_ - Text]的问题一样？可是这里并没有设置`overflow`的属性为`TextOverflow.ellipsis`。

继续找到使用`hintMaxLines`属性的位置，位于`_InputDecoratorState`类的`build`方法：

@override
    Widget build(BuildContext context) {
        
      ...
      final String? hintText = decoration.hintText;
      final Widget? hint = hintText == null
          ? null
          : AnimatedOpacity(
              opacity: (isEmpty && !_hasInlineLabel) ? 1.0 : 0.0,
              duration: _kTransitionDuration,
              curve: _kTransitionCurve,
              child: Text(
                hintText,
                style: hintStyle,
                textDirection: decoration.hintTextDirection,
                overflow: hintStyle.overflow ?? TextOverflow.ellipsis,
                textAlign: textAlign,
                maxLines: decoration.hintMaxLines,
              ),
            );
      ...
    }

破案了，当没有设置`hintStyle.overflow`时，会默认设置为`TextOverflow.ellipsis`，再加上`hintMaxLines`为`null`，这对于Text组件来说，必会截断为一行，具体缘由请看[Flutter问题记录 - Text组件设置不限行数无效][Flutter_ - Text]。

原因找到了，那问题就好解决啦！加上`overflow`设置，只要不是`TextOverflow.ellipsis`都可以：

TextField(
      maxLines: null,
      decoration: InputDecoration(
        hintText: 'Text that suggests what sort of input the field accepts.' * 5,
        hintStyle: const TextStyle(overflow: TextOverflow.fade),
        border: InputBorder.none,
      ),
    );

重新运行，一切正常?！

![screenshot2][]

这个遗留的`TODO`有点久远了，在我印象中当时好像还有其他问题解决不了。翻了翻Flutter框架的历史提交记录，果然现在的解决方法搁那时候也还是行不通的。那时候`overflow`是硬编码的，直到去年11月才改成现在这样，详见[hintText TextOverflow][]：

![screenshot3][]

## 解决方案 ##

`TextField`组件的提示文本`hintText`不限制行数时，需要通过`hintStyle`设置`overflow`属性，只要不是`TextOverflow.ellipsis`都可以。

## 最后 ##

如果这篇文章对你有所帮助，请不要吝啬你的点赞?加星?，谢谢～

[screenshot1]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/e9ab1bb0c0cb4cd68e46a57aeef9bd3f.png
[Flutter_ - Text]: https://blog.csdn.net/crasowas/article/details/130666488
[screenshot2]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/1aab23e182d843c081a70940747641a6.png
[hintText TextOverflow]: https://github.com/flutter/flutter/pull/1143
[screenshot3]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/fcaaa322f47f41d6963d3047cb6d3e89.png