文本字段位于键盘上方

Question

我希望键盘向上推文本字段，这样用户就可以在不滚动的情况下看到完整的文本字段。尝试的resizeToAvoidBottomInset：如Flutter TextFormField中所建议的那样，由键盘隐藏

但是，当文本字段处于焦点时，键盘仍然隐藏文本字段。

以下是我从Scaffold开始的代码：

Scaffold(
resizeToAvoidBottomInset: true,
floatingActionButton: Container(
height: height * 0.054,
width: width * 0.885,
child: FloatingActionButton.extended(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(9.0))),
isExtended: true,
backgroundColor: Colos.blue,
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
onPressed: () {
},
label: Text('SEND',
style: TextStyle(
color: Colors.white
fontWeight: FontWeight.bold,
letterSpacing: 2.1,
fontSize: 13.5)),
),
),
extendBody: true,
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
appBar: AppBar(
backgroundColor: Colors.black,
leading: IconButton(
icon: Icon(Icons.chevron_left,
size: 21, color: Colors.white
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => TestingHomePage()),
);
},
),
centerTitle: true,
title: Text('Textfield',
style: TextStyle(
color: Colors.white
fontWeight: FontWeight.bold,
fontSize: 18)),
),
backgroundColor: Colors.black,
body: SafeArea(
child: SingleChildScrollView(
child: Column(children: <Widget>[
Padding(
padding: EdgeInsets.only(top: height * 0.015),
child: Container(
margin: EdgeInsets.symmetric(
horizontal: width * 0.045,
),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(12)),
color: Colors.red,
),
child: Widget

brackets
Padding(
padding: EdgeInsets.symmetric(
horizontal: width * 0.06, vertical: height * 0.02),
child: TextField(
style: TextStyle(color: Colors.white),
maxLines: maxLines,
autofocus: false,
decoration: InputDecoration(
decoration...
),
onChanged: (text) {
print("First text field: $text");
brackets

可能是因为浮动操作按钮停靠了吗？

Answer 1

这里的问题是文本字段在滚动视图中。

遵循以下层次结构：

Scaffold(
body: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [ ... ] // Put your scroll view elements here.
),
)
),
// Put your text field outside the scroll view.
Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(),
),
],
),
),
);

这样，每当屏幕大小发生变化时，滚动视图就会由于扩展的小部件而缩小，而TextField则保持固定在底部，并随着键盘向上移动。

---

此外，在进行更改后尝试设置resizeToAvoidBottomInset:false/true，以更好地了解此属性的作用。