Flutter 处理异步操作并根据异步操作状态动态构建界面的方法FutureBuilder

概述

当界面的内容需要依靠网络请求的数据,就需要处理苦恼的,状态是空,非空的逻辑了,不然页面构建可能会报错,而FutureBuilder提供了一个非常好的解决方法,直接看代码

代码

异步操作函数

即网络请求函数(通常情况下)

Dart 复制代码
Future<List<String>> fetchStringList() async {
  return Future.delayed(Duration(seconds: 2), () {
    // 模拟网络请求
    return ['Item 1', 'Item 2', 'Item 3'];
  });
}

widget构建部分

Dart 复制代码
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('FutureBuilder Example'),
        ),
        body: Center(
          child: FutureBuilder<List<String>>(
            future: fetchStringList(), // Future函数
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                // 数据还在加载中,显示一个加载指示器
                return CircularProgressIndicator();
              } else if (snapshot.hasError) {
                return Text('Error: ${snapshot.error}');
              } else {
                return ListView.builder(
                  itemCount: snapshot.data!.length,
                  itemBuilder: (context, index) {
                    return ListTile(
                      title: Text(snapshot.data![index]),
                    );
                  },
                );
              }
            },
          ),
        ),
      ),
    );
  }
}

可以看出来,这为需要异步操作的页面提供了更好的构建页面方式。

相关推荐
weixin_307779137 分钟前
PySpark实现ABC_manage_channel逻辑
开发语言·python·spark
jingling5551 小时前
【Vue3 实战】插槽封装与懒加载
前端·javascript·vue.js
??? Meggie1 小时前
【Python】保持Selenium稳定爬取的方法(防检测策略)
开发语言·python·selenium
百锦再1 小时前
Java与Kotlin在Android开发中的全面对比分析
android·java·google·kotlin·app·效率·趋势
星星点点洲2 小时前
【缓存与数据库结合最终方案】伪从技术
数据库·缓存
小黑屋的黑小子2 小时前
【MySQL】MySQL索引与事务
数据库·mysql·oracle
酷爱码3 小时前
如何通过python连接hive,并对里面的表进行增删改查操作
开发语言·hive·python
画个大饼3 小时前
Go语言实战:快速搭建完整的用户认证系统
开发语言·后端·golang
喵先生!4 小时前
C++中的vector和list的区别与适用场景
开发语言·c++
OK_boom5 小时前
Dapper的数据库操作备忘
数据库