如何在文本框长度达标时触发方法？优化发帖字号切换性能

要避免每次按键都调用setState，核心是只在文本长度跨越阈值（99→100或100→99）时才更新字号状态，而非每次字符变化都执行重绘。

方法一：基于StatefulWidget的优化实现 #

在onChanged回调中判断当前长度是否触发了阈值切换，仅在需要时调用setState：

class PostEditor extends StatefulWidget {
  const PostEditor({super.key});

  @override
  State<PostEditor> createState() => _PostEditorState();
}

class _PostEditorState extends State<PostEditor> {
  double _fontSize = 30.0;
  final TextEditingController _controller = TextEditingController();

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: _controller,
      style: TextStyle(fontSize: _fontSize),
      onChanged: (text) {
        final int length = text.length;
        // 仅在阈值切换点更新状态
        if (length >= 100 && _fontSize != 16.0) {
          setState(() => _fontSize = 16.0);
        } else if (length < 100 && _fontSize != 30.0) {
          setState(() => _fontSize = 30.0);
        }
      },
      decoration: const InputDecoration(hintText: '开始撰写你的帖子...'),
      maxLines: null,
    );
  }
}

方法二：用ValueNotifier实现无setState的状态管理 #

如果想彻底摆脱StatefulWidget的setState，可以用ValueNotifier配合ValueListenableBuilder，仅在字号实际变化时才重建文本样式部分：

class PostEditor extends StatelessWidget {
  const PostEditor({super.key});

  @override
  Widget build(BuildContext context) {
    final ValueNotifier<double> fontSizeNotifier = ValueNotifier(30.0);
    final TextEditingController controller = TextEditingController();

    return TextField(
      controller: controller,
      style: TextStyle(fontSize: fontSizeNotifier.value),
      onChanged: (text) {
        final int length = text.length;
        if (length >= 100 && fontSizeNotifier.value != 16.0) {
          fontSizeNotifier.value = 16.0;
        } else if (length < 100 && fontSizeNotifier.value != 30.0) {
          fontSizeNotifier.value = 30.0;
        }
      },
      decoration: const InputDecoration(hintText: '开始撰写你的帖子...'),
      maxLines: null,
    );
  }
}
// 注：如果是在StatelessWidget中使用ValueNotifier，建议将其提升到父级StatefulWidget或用状态管理库，避免组件重建时重置状态

性能优化原理 #

• 第一种方法：每次按键仅做简单的长度判断和字号比对，只有当字号需要切换时才触发setState，大幅减少不必要的页面重绘。
• 第二种方法：ValueListenableBuilder只会监听字号值的变化，仅重建与字号相关的样式部分，而非整个组件树，性能损耗更低。

内容的提问来源于stack exchange，提问作者Mohammad Amini