flutter - 文本字段高于键盘
问题描述
我希望键盘向上推动文本字段,以便无需用户滚动即可看到完整的文本字段。尝试 resizeToAvoidBottomInset: true 如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
可能是因为浮动操作按钮停靠了吗?
解决方案
这里的问题是文本字段在滚动视图内。
遵循此层次结构:
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 以更好地了解此属性的作用。
推荐阅读
- javascript - 如何从JS中的字符串中删除括号中的术语?
- css - CSS 在一张图片旁边浮动两个块 div
- c++ - 当只有一个进程正在写入时,Posix 共享内存同步
- excel - Excel 的问题 - 第三方是否篡改了我的计算机?
- python - 我只能访问 Python 函数中返回的部分项目吗?
- javascript - 跨度在反应应用程序中堆叠在彼此之上而不是在彼此之下
- api-eveonline - 从 eve online 的文件位置获取用户详细信息,如登录时间、宇宙角色开启
- excel - 如何使用电源查询提取图像链接?
- angular - 在 Angular 中使用 Youtube 的 Javascript API
- c# - 在 Entity Framework Core 中使用多个值进行更新