我有一个FutureBuilder小部件,它从服务器检索聊天(或更确切地说是更新)并显示它们。这是代码:
Future<List<Chat>> fetchChats(http.Client client, String providerUUID) async {
returns List<Chat>..
}
class ProviderChats extends StatelessWidget {
final List<Chat> chats;
final String providerUUID;
ProviderChats({this.chats, this.providerUUID});
@override
Widget build(BuildContext context) {
return FutureBuilder<List<Chat>>(
future: fetchChats(http.Client(), providerUUID),
builder: (context, snapshot){
if(snapshot.hasError) print(snapshot.error);
return snapshot.hasData ?
ChatsListWidgetClass(chats: snapshot.data) :
Center(child: CircularProgressIndicator());
},
);
}
}
class ChatsListWidgetClass extends StatelessWidget {
final List<Chat> chats;
ChatsListWidgetClass({this.chats});
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: chats.length,
itemBuilder: (context, index) {
return Card(
elevation: 10.0,
child: Column(
children: <Widget>[
Text(
chats[index].message,
),
Text(
chats[index].createdAt,
),
],
),
);
},
);
}
}
看起来像这样:
在屏幕底部,我想显示一个带有“发送”按钮的TextField(就像我们在聊天屏幕上看到的一样)。但是我无法将我的ListView.builder容纳在列中。
有没有一种方法可以使列表从顶部占据垂直空间的80%,并使发送文本字段从底部占据20%。基本上就像一个聊天应用程序窗口。
最佳答案
使用Remi的回复,这对我有用
return new Scaffold(
appBar: new AppBar(
title: new Text("Home Page"),
),
body: new Builder(
builder: (BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Expanded(
flex: 8,
child: futureBuilder,
),
Expanded(
flex: 2,
child: Text("hello"),
),
],
);
}
)
);