如何在Flutter中制作可滚动的多行输入文本？

Question

抱歉，我是 Flutter 新手。我尝试在 Stackoverflow 中找到它，但找不到。

我需要做这样的东西

类似于一个盒子，具有固定的高度和宽度，具有多行输入并且还可以滚动。在原生 iOS 中，我可以轻松使用 TextView，但我不知道 Flutter 的等效项。

我尝试使用这样的文本字段来实现它

   TextFormField(
      autofocus: true,
      autocorrect: false,
      keyboardType: TextInputType.multiline,
      maxLines: null,
      decoration: InputDecoration(
        filled: true,
        fillColor: Color(0xFFF2F2F2),
        border: OutlineInputBorder(
          borderRadius: BorderRadius.all(Radius.circular(4)),
          borderSide: BorderSide(width: 1),
        ),
      ),
    ),

但它没有滚动能力，我无法设置固定高度。请帮忙...

Answer 1

您只需要设置如下所示的 minLines 和 maxLines ，对于盒子， maxLines 会为您设置高度，而对于宽度，您可以将 TextFormField 包装到容器中并手动为其指定宽度。

TextFormField(
  autofocus: true,
  autocorrect: false,
  keyboardType: TextInputType.multiline,
  minLines: 1,
  maxLines: 8,
  decoration: InputDecoration(
    filled: true,
    fillColor: Color(0xFFF2F2F2),
    border: OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(4)),
      borderSide: BorderSide(width: 1),
    ),
  ),
),

Answer 2

如果您的文本字段与其他静态元素一起位于列中，则可以通过获取设备屏幕高度 (MediaQuery) 并乘以所需的系数（0 到 1 之间）来限制文本字段的高度，然后设置您的滚动物理参数TextField/TextFormField 到“AlwaysScrollablePhysics()”

Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Padding(
              padding: const EdgeInsets.only(bottom: 8),
              child: Text(FlutterI18n.translate(ctx, 'tour.clipboardNote.content'), style: TextStyle(fontSize: TextSize.medium),),
            ),
            ConstrainedBox(
              constraints: BoxConstraints(maxHeight: MediaQuery.of(context).size.height * 0.5),
              child: TextFormField(
                controller: noteController,
                keyboardType: TextInputType.multiline,
                minLines: null,
                maxLines: null,
                scrollPhysics: AlwaysScrollableScrollPhysics(),
              ),
            ),
          ],
        )