Flutter FutureBuilder返回Object实例 如何合并组件简化代码

问题原因 #

你之前直接将List<DashBoardBanner>类型的返回结果直接传给Text组件渲染，Dart默认的对象toString方法会输出Instance of '类名'格式的内容，不是没有拿到数据，只是没有正确访问类实例的属性值。

合并逻辑的实现方案 #

不需要单独定义DashBoardBannersList组件，直接把组件内部的逻辑替换到FutureBuilder的成功分支即可，修改后的完整主组件代码如下：

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  _MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
  late Future<List<DashBoardBanner>> futureBanner;
  @override
  void initState() {
    super.initState();
    futureBanner = getBannerDataFromServer();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: ListView(
            children: [
              Card(
                child: FutureBuilder<List<DashBoardBanner>>(
                  // 注意这里要用提前初始化好的futureBanner，不要重复调用请求方法
                  future: futureBanner,
                  builder: (context,snapshot){
                    if(snapshot.connectionState == ConnectionState.done){
                      if (snapshot.hasData) {
                        // 直接在这里访问列表元素的属性即可，不需要额外组件
                        // 如果要展示第一个元素的MsgId就这么写：
                        return Text(snapshot.data![0].MsgId);
                        // 如果要展示所有Banner内容，可以直接构建列表：
                        /*
                        return Column(
                          children: snapshot.data!.map((banner) => Column(
                            children: [
                              Text(banner.MsgId),
                              Text(banner.MsgKey),
                              Image.network(banner.MsgPic),
                            ],
                          )).toList(),
                        );
                        */
                      } else if (snapshot.hasError) {
                        return Text('${snapshot.error}');
                      }
                    }
                    return const CircularProgressIndicator();
                  },
                ),
              )
            ],
          )),
    );
  }
}

额外优化建议 #

• 不要在FutureBuilder的future参数中直接调用请求方法，否则每次组件重绘都会重复发起网络请求，应该使用initState中提前初始化好的Future实例。
• 建议变量命名符合Dart规范，使用小驼峰格式，比如把MsgId改为msgId，可读性更好。

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