TextField 底部在聚焦时溢出

Question

我在 Flutter 中有

TextField

。它位于屏幕底部，例如：

在这个例子中，我之前放置了几个

Text

s以将其移动到底部。当我聚焦

TextField

时，出现溢出区域：

如何摆脱这个区域？一种选择是显示键盘（没有溢出区域）或第二种显示带有文本字段的“白屏”，就像我们在 Android 中使用的那样（横向，当没有太多地方时）。

有人可以建议，如何摆脱这种错误行为？谢谢。

我的代码：

return Scaffold(
  key: scaffoldKey,
  body: SafeArea(
    child: Column(
      children: [
        Text("Test"),
        ...
        TextField()
      ],
    ),
  )
);

Answer 1

试试这个方法，

return Scaffold(
  resizeToAvoidBottomInset: true,
  key: scaffoldKey,
  body: SafeArea(
    child: SingleChildScrollView(
      child: Column(
        children: [
          Text("Test"),
          ...
          TextField()
        ],
      ),
    ),
  ),
);

Answer 2

将您的

Column

小部件包裹在

ListView

或

SingleChildScrollView

中，使其在键盘打开时可滚动：

return Scaffold(
        key: scaffoldKey,
        body: SafeArea(
          child: ListView(
            padding:EdgeInsets.zero,
            children: [
              Column(
                children: [
                  Text("Test"),
                  ...
                  TextField()
                ],
              ),
            ],
          ),
        )
    );;