[英]Keyboard hides TextField - Flutter
I've made a chat page that contains the header, a MessagesStream
and a Row
that includes the TextField
and RaisedButton
.我制作了一个聊天页面,其中包含 header、一个MessagesStream
和一个包含TextField
和RaisedButton
的Row
。 I've checked every single page there is about this issue, both in GitHub and StackOverflow, but I wasn't able to find any solution.我已经检查了关于这个问题的每一页,包括 GitHub 和 StackOverflow,但我找不到任何解决方案。 The row does not go up when the keyboard is launched, instead it goes over the bottom part of the screen, hiding everything.启动键盘时,该行不会 go 向上,而是越过屏幕底部,隐藏所有内容。
Could anyone please help me figure this out?谁能帮我解决这个问题? I've literally tried everything.我真的尝试了一切。
This is my Scaffold
:这是我的Scaffold
:
Widget build(BuildContext context) {
return GestureDetector(
onTap: (){
FocusScope.of(context).requestFocus(new FocusNode());
},
child: Scaffold(
resizeToAvoidBottomInset: true,
backgroundColor: Colors.lightGreenAccent,
appBar: new AppBar(
backgroundColor: Colors.lightGreenAccent,
elevation: 0,
leading: IconButton(
icon: Icon(Icons.arrow_back_ios, color: Colors.white),
onPressed: () => Navigator.of(context).pop(),
),
centerTitle: true,
title: Image(
image: iconApp,
height: 50,
width: 50,
),
),
body: SafeArea(
child: Column(
children: <Widget>[
SizedBox(height: 10),
Expanded(
child: Container(
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(topLeft: Radius.circular(30.0),
topRight: Radius.circular(30.0)),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Material(
borderRadius: BorderRadius.only(topLeft: Radius.circular(30.0),
topRight: Radius.circular(30.0)),
color: grayWhite,
elevation: 2,
child: Padding(
padding: const EdgeInsets.only(bottom:10),
child: Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 10.0, left: 15),
child: CircleAvatar(
child: Image.network(
),
),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 10, left: 15),
child: Text(
"Test",
style: TextStyle(
color: Colors.black54,
fontSize: 20
),
),
),
Padding(
padding: const EdgeInsets.only(top: 3, left: 15),
child: Text(
"Test2",
style: TextStyle(
color: Colors.black54,
fontSize: 15
),
),
),
Container(
height: 1,
color: Colors.white70,
)
],
),
)
],
),
),
),
MensagensStream(),
Row(
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
controller: textEditingController,
autofocus: true,
autocorrect: true,
onChanged: (value) {
mensagem = value;
},
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
),
hintText: "Digite a sua mensagem..."
),
),
),
),
ButtonTheme(
height: 55,
minWidth: 10,
child: RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
100,
)
),
color: Colors.lightGreenAccent,
child: Icon(Icons.send, color: Colors.white),
onPressed: () => {
textEditingController.clear(),
firestore.collection('mensagens').add({
'Mensagem': mensagem,
'Remetente': googleEmail,
'Destinatario': "patio@teste.com",
'DataHorario': FieldValue.serverTimestamp(),
})
},
),
),
],
)
],
),
),
)
],
),
),
),
);
}
}```
You can use a Scaffold
and place the text field as bottomSheet
您可以使用Scaffold
并将文本字段放置为bottomSheet
Wrap either one of you Column
s (probably the outer one) with a SingleChildScrollView
.用SingleChildScrollView
包裹你们中的任何一个Column
(可能是外部的)。 The issue is that simply popping up the keyboard doesn't suddenly tell the layout that it needs to be able to scroll.问题是简单地弹出键盘并不会突然告诉布局它需要能够滚动。 You have explicitly say you want it to be able to scroll.您已明确表示希望它能够滚动。
See this for more information on the SingleChildScrollView
.有关SingleChildScrollView
的更多信息,请参阅此内容。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.