Flutter 将 FutureBuilder 小部件放在一个 Column 中

Posted 2023-02-23

【中文标题】Flutter 将 FutureBuilder 小部件放在一个 Column 中

【英文标题】：Flutter put FutureBuilder widget inside a Column

【发布时间】：2019-02-19 11:58:33

【问题描述】：

我有一个 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（就像我们在聊天屏幕上看到的一样）。但我无法在 Column 中容纳我的 ListView.builder。

有没有办法让列表从顶部占据 80% 的垂直空间，让发送文本字段占据底部 20%。基本上就像一个聊天应用程序窗口。

【问题讨论】：

您可以将 textField 添加为 listView 中的最后一个元素吗(itemCount: chats.length + 1) ？

【参考方案1】：

使用 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"),
                  ),

              ],
            );
        
      )
    );

【参考方案2】：

您可以使用带有自定义权重的Expanded 以百分比填充列

Column(
  children: <Widget>[
    Expanded(
      flex: 8,
      child: Container(
        color: Colors.red,
      ),
    ),
    Expanded(
      flex: 2,
      child: Container(
        color: Colors.blue,
      ),
    ),
  ],
);