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]),
                    );
                  },
                );
              }
            },
          ),
        ),
      ),
    );
  }
}

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

相关推荐
csbysj202012 分钟前
如何使用 XML Schema
开发语言
R6bandito_17 分钟前
STM32中printf的重定向详解
开发语言·经验分享·stm32·单片机·嵌入式硬件·mcu
lvchaoq22 分钟前
react 修复403页面无法在首页跳转问题
前端·javascript·react.js
shan~~24 分钟前
linux达梦数据库操作
linux·数据库·chrome
earthzhang202124 分钟前
【1007】计算(a+b)×c的值
c语言·开发语言·数据结构·算法·青少年编程
郝开27 分钟前
6. React useState基础使用:useState修改状态的规则;useState修改对象状态的规则
前端·javascript·react.js
杨枝甘露小码32 分钟前
Python学习之基础篇
开发语言·python
Codigger官方1 小时前
Linux 基金会牵头成立 React 基金会:前端开源生态迎来里程碑式变革
linux·前端·react.js
90后的晨仔1 小时前
🌟 Vue3 + Element Plus 表格开发实战:从数据映射到 UI 优化的五大技巧
前端
武文斌771 小时前
项目学习总结:LVGL图形参数动态变化、开发板的GDB调试、sqlite3移植、MQTT协议、心跳包
linux·开发语言·网络·arm开发·数据库·嵌入式硬件·学习