Flutter 未来构建者名单

Question

我在理解未来构建器如何在颤振中工作时遇到一些困难。我想从未来的调用中传递一个字符串列表，并且我想在 SingleChildScrollView 中显示它们。

问题是当我访问时snapshot.data我无法访问列表的元素。因为在我的 SingleChildScrollView 中我有容器，并且在每个容器中我想显示列表中的一个字符串。

这是我用来检索数据的 Future getData 方法。

Future<List<String>> getData () async {
    List<String> data = [];
    data.add("A");
    data.add("B");
    data.add("C");
    // DEBUG
    await Future.delayed(const Duration(seconds: 2), (){});
    return data;
}

这是我未来的构建器，我想在其中显示每个容器中的数据。在加载中我添加了闪光效果。

FutureBuilder(
  builder: (context, snapshot) {
    List<Widget> children;
    if (snapshot.hasData) {
      children = <Widget>[
        SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: Row(
            children: [
              Container(
                margin: EdgeInsets.only(left: 5.w),
                width: 40.w,
                height: 20.h,
                decoration: BoxDecoration(
                  color: green400,
                  borderRadius: BorderRadius.all(Radius.circular(5.w)),
                ),
              ),
              Container(
                margin: EdgeInsets.only(left: 5.w),
                width: 40.w,
                height: 20.h,
                decoration: BoxDecoration(
                  color: green400,
                  borderRadius: BorderRadius.all(Radius.circular(5.w)),
                ),
              ),
              Container(
                margin: EdgeInsets.only(left: 5.w),
                width: 40.w,
                height: 20.h,
                decoration: BoxDecoration(
                  color: green400,
                  borderRadius: BorderRadius.all(Radius.circular(5.w)),
                ),
              ),
            ],
          ),
        ),
      ];
    } else if (snapshot.hasError) {
      children = <Widget>[
        const Icon(
          Icons.error_outline,
          color: Colors.red,
          size: 60,
        ),
        Padding(
          padding: const EdgeInsets.only(top: 16),
          child: Text('Error: ${snapshot.error}'),
        )
      ];
    } else {
      children = <Widget>[
        
        SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: Row(
            children: [
              Shimmer.fromColors(
                baseColor: Colors.grey.shade200,
                highlightColor: Colors.grey.shade300,
                child: Container(
                  margin: EdgeInsets.only(left: 5.w),
                  width: 40.w,
                  height: 20.h,
                  decoration: BoxDecoration(
                    color: green400,
                    borderRadius: BorderRadius.all(Radius.circular(5.w)),
                  ),
                ),
              ),
              Shimmer.fromColors(
                baseColor: Colors.grey.shade200,
                highlightColor: Colors.grey.shade300,
                child: Container(
                  margin: EdgeInsets.only(left: 5.w),
                  width: 40.w,
                  height: 20.h,
                  decoration: BoxDecoration(
                    color: green400,
                    borderRadius: BorderRadius.all(Radius.circular(5.w)),
                  ),
                ),
              ),
              Shimmer.fromColors(
                baseColor: Colors.grey.shade200,
                highlightColor: Colors.grey.shade300,
                child: Container(
                  margin: EdgeInsets.only(left: 5.w),
                  width: 40.w,
                  height: 20.h,
                  decoration: BoxDecoration(
                    color: green400,
                    borderRadius: BorderRadius.all(Radius.circular(5.w)),
                  ),
                ),
              ),
            ],
          ),
        ),
      ];
    }
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: children,
      ),
    );
  },
  future: getData(),
),

那么通过这种方式我可以访问字符串列表的元素吗？

Answer 1

正如@piskink 提到的，使用 ListView.builder效率更高。

body: FutureBuilder<List<String>?>(
  future: getData(),
  builder: (context, snapshot) {
    if (snapshot.hasData &&
        snapshot.connectionState == ConnectionState.done) {
      return ListView.builder(
        itemCount: snapshot.data!.length,
        itemBuilder: (context, index) {
          return Text(snapshot.data?[index] ?? "got null");
        },
      );
    }

    /// handles others as you did on question
    else {
      return CircularProgressIndicator();
    }
  },

如果您仍然想使用SingleChildScrollView，您可以生成类似的项目

return Column(
  children: List.generate(
    snapshot.data!.length,
    (index) => Text(snapshot.data?[index] ?? "got null"),
  ),
);

查看有关async-await和Future 的更多信息。