我创建了一个聊天页面,其中包含标题,一个MessagesStream
和一个Row
,其中包含TextField
和RaisedButton
。我已经在GitHub和StackOverflow中检查了有关此问题的每个页面,但是找不到任何解决方案。当启动键盘时,该行不会上升,而是越过屏幕的底部,隐藏所有内容。
有人可以帮我解决这个问题吗?我真的尝试了一切。
这是我的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(),
})
},
),
),
],
)
],
),
),
)
],
),
),
),
);
}
}```
答案 0 :(得分:0)
用Column
包裹您SingleChildScrollView
中的一个(可能是外面的)。问题在于,仅弹出键盘并不会突然告诉布局它需要能够滚动。您已经明确表示希望它能够滚动。
有关SingleChildScrollView
的更多信息,请参见this。
答案 1 :(得分:0)
您可以使用Scaffold
并将文本字段放置为bottomSheet