Flutter开发求助：如何在FutureBuilder后添加Container或Widget？

你不需要分成两个页面，只需要在FutureBuilder获取到数据后，用Column将ListView.builder和按钮组件组合起来即可。注意要给ListView套上Expanded，让它占据剩余可用空间，避免布局溢出问题。

修改后的完整代码如下：

@override
Widget build(BuildContext context) => Scaffold(
      body: FutureBuilder<ListResult>(
        future: futureFiles,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            final files = snapshot.data!.items;
            // 用Column组合列表和按钮
            return Column(
              children: [
                // Expanded包裹ListView，让它占满剩余空间
                Expanded(
                  child: ListView.builder(
                    itemCount: files.length,
                    itemBuilder: (context, index) {
                      final file = files[index];
                      double? progress = downloadProgress[index];
                      return ListTile(
                        title: Text(file.name),
                        subtitle: progress != null
                            ? LinearProgressIndicator(
                                value: progress,
                                backgroundColor: Colors.black26,
                              )
                            : null,
                        trailing: IconButton(
                          icon: const Icon(
                            Icons.download,
                            color: Colors.white,
                          ),
                          onPressed: () => downloadFile(index, file),
                        ),
                      );
                    },
                  ),
                ),
                // 添加第二段代码中的按钮行和进度组件
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Padding(
                      padding: EdgeInsets.all(20.0),
                      child: SizedBox(
                        height: 40,
                        width: 150,
                        child: ElevatedButton(
                          child: Text('Select File'),
                          onPressed: selectFile, // 确保你的类中实现了selectFile方法
                          style: ElevatedButton.styleFrom(
                            backgroundColor: Colors.red,
                            textStyle: const TextStyle(fontSize: 20),
                          ),
                        ),
                      ),
                    ),
                    SizedBox(
                      height: 40,
                      width: 150,
                      child: ElevatedButton(
                        child: Text('Upload File'),
                        onPressed: uploadFile, // 确保你的类中实现了uploadFile方法
                        style: ElevatedButton.styleFrom(
                          backgroundColor: Colors.red,
                          textStyle: const TextStyle(fontSize: 20),
                        ),
                      ),
                    ),
                  ],
                ),
                buildProgress(), // 确保你的类中实现了buildProgress方法
              ],
            );
          } else if (snapshot.hasError) {
            return const Center(child: Text('Error occurred'));
          } else {
            return const Center(child: CircularProgressIndicator());
          }
        },
      ),
    );

关键说明： #

• Column：用来垂直排列列表和按钮组件，实现列表在上、按钮在下的布局。
• Expanded：包裹ListView.builder，让列表自动填充Column中除了按钮之外的剩余空间，防止因ListView高度无限导致的布局错误。
• 确保你的State类中已经实现了selectFile、uploadFile和buildProgress这几个方法（从第二段代码中迁移过来）。

这样修改后，就能在列表加载完成后，将按钮组件显示在列表下方，无需拆分页面。

内容的提问来源于stack exchange，提问作者MatsL