如何在 flutter 的一页中使用两个 future builder

Question

在我的 Flutter 应用程序中，我需要显示来自数据库的两个列表，但我无法让这两个列表显示在同一屏幕上。我正在使用两个 FutureBuilder 小部件，但第一个列表显示正确，而第二个列表仍在加载。

这是我正在使用的代码：

var future1 = FutureBuilder<List<QuranTextModel>>(
  future: database.getQuranText(),
  builder: (context, snapshot) {
    if(snapshot.hasData){
      return ScrollablePositionedList.builder(
        itemScrollController: scrollToIndex,
        itemCount: snapshot.data!.length,
        initialScrollIndex: widget.position,
        itemBuilder: (context, index) {
          // Build the list item widget here
        });
    }else{
      return const Center(child: CircularProgressIndicator(),);
    }
  }
);

var future2 = FutureBuilder<List<UrduTextModel>>(
  future: database.getUrduTranlation(),
  builder: (context, snapshot) {
    if(snapshot.hasData){
      return ScrollablePositionedList.builder(
        itemScrollController: scrollToIndex,
        itemCount: snapshot.data!.length,
        initialScrollIndex: widget.position,
        itemBuilder: (context, index) {
          // Build the list item widget here
        });
    }else{
      return const Center(child: CircularProgressIndicator(),);
    }
  }
);

Column(
  children: [
    SizedBox(
      height: 200,
      child: future1,
    ),
    SizedBox(
      height: 200,
      child: future2,
    ),
  ],
)

第一个 FutureBuilder 用于构建 QuranTextModel 对象列表，第二个 FutureBuilder 用于构建 UrduTextModel 对象列表。我正在使用一个 Column 小部件来显示两个列表，每个列表都包含在一个 SizedBox 小部件中以给它一个固定的高度。

我遇到的问题是只有第一个列表显示正确，而第二个列表仍在加载。如何让两个列表显示在同一屏幕上？

感谢您提供任何帮助！

Answer 1

 SingleChildScrollView(
          child: Column(
      children: [
        SizedBox(
          height: 200,
            child: future1),
        SizedBox(height: 200,child: future2,)
      ],
    ),
        ),

尝试这个。

您还必须在填充之前检查您的未来状态，您可以使用

if (snap.connectionState == ConnectionState.done) { your code. you can check does snpa has data in it.  }

连接状态具有不同的状态，可以帮助您使 UI 更具交互性