Flutter | 判断 Text 组件是否显示完

实际开发中有时需要根据 Text 组件是否显示完做不同的处理，比如说当没有显示完的时候，点击这个 Text 弹出一个详情弹窗。

我们真的需要去判断吗？
其实不需要。

插件 auto_size_text 就可以完美实现此功能：

https://pub.dev/packages/auto_size_text

其属性 overflowReplacement 表示：当显示不完全的时候，用 overflowReplacement 指定的组件替代。

代码举例：

class _AutoSizeTextDemoPageState extends State<AutoSizeTextDemoPage> {
  var _string = '显示的文字';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: BaseAppBar(titleText: 'AutoSizeText'),
      body: Column(
        children: [
          Container(
            width: 100,
            height: 30,
            color: Colors.red,
            child: AutoSizeText(
              _string,
              maxLines: 1,
              overflowReplacement: GestureDetector(
                onTap: () {
                  print('文本显示不完的时候，可以点击');
                },
                child: const Text('当前文字显示不完了'),
              ),
            ),
          ),
          ElevatedButton(
            onPressed: () {
              setState(() {
                _string += '加长';
              });
            },
            child: const Text('增加文字长度'),
          ),
        ],
      ),
    );
  }
}

如果你真的需要判断 Text 组件是否显示完，看这个插件的源码吧。