Flutter：如何创建带滚动条的3行文本框？解决滚动条及高度异常

问题分析 #

你当前的代码存在两个核心问题：

• 滚动条无法正常关联TextField的滚动：Scrollbar需要直接包裹具备滚动能力的Scrollable组件，而TextField内部的滚动逻辑无法被外部Scrollbar正确监听。
• 高度无法固定：设置maxLines:3后，当内容超过3行时，TextField会自动拉伸高度，而不是保持固定高度并允许滚动。

修复方案 #

以下是两种可行的实现方式：

方式一：通过minLines和SingleChildScrollView控制高度

这种方式让输入框默认显示3行高度，内容超出时自动滚动，同时滚动条正常显示：

final _scrollController = ScrollController();

// 构建Widget
Scrollbar(
  controller: _scrollController,
  thumbVisibility: true, // 替代已过时的isAlwaysShown，保持滚动条可见
  child: SingleChildScrollView(
    controller: _scrollController,
    physics: const AlwaysScrollableScrollPhysics(), // 确保内容不足时也能触发滚动（可选）
    child: TextField(
      autofocus: true,
      keyboardType: TextInputType.multiline,
      maxLines: null, // 允许内容无限换行
      minLines: 3, // 初始显示3行高度
      autocorrect: true,
      onChanged: (s) {},
      decoration: const InputDecoration(
        border: InputBorder.none,
        isDense: true,
        contentPadding: EdgeInsets.symmetric(vertical: 8.0), // 调整内边距优化高度适配
      ),
    ),
  ),
)

方式二：固定高度为3行文本高度

如果需要严格固定输入框高度为3行文本的实际高度，可以通过TextPainter计算高度后用SizedBox约束：

final _scrollController = ScrollController();

// 计算3行文本的高度
double _getThreeLineHeight(BuildContext context) {
  final defaultStyle = DefaultTextStyle.of(context).style;
  final textPainter = TextPainter(
    text: TextSpan(text: '占位文本', style: defaultStyle),
    maxLines: 3,
    textDirection: TextDirection.ltr,
  )..layout(minWidth: 0, maxWidth: MediaQuery.of(context).size.width);
  return textPainter.size.height;
}

// 构建Widget
Scrollbar(
  controller: _scrollController,
  thumbVisibility: true,
  child: SizedBox(
    height: _getThreeLineHeight(context),
    child: SingleChildScrollView(
      controller: _scrollController,
      child: TextField(
        autofocus: true,
        keyboardType: TextInputType.multiline,
        maxLines: null,
        autocorrect: true,
        onChanged: (s) {},
        decoration: const InputDecoration(
          border: InputBorder.none,
          isDense: true,
          contentPadding: EdgeInsets.zero,
        ),
      ),
    ),
  ),
)

关键说明 #

• 使用SingleChildScrollView作为Scrollbar的直接子组件，确保滚动事件能被Scrollbar正确捕捉。
• 设置maxLines:null允许文本无限换行，配合minLines:3或固定高度，实现"固定3行高度+滚动"的效果。
• 新版本Flutter推荐使用thumbVisibility替代isAlwaysShown，后者已被标记为过时。

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