如何将FutureBuilder改为ListView.Builder，实现无Future数据获取及POST请求

核心思路 #

移除FutureBuilder后，我们需要手动管理请求的生命周期状态（加载中、成功、失败），通过状态变量控制UI渲染，直接在initState或用户交互（比如按钮点击）时发起Dio请求，更新状态后驱动ListView.Builder刷新。

步骤1：定义状态变量 #

在State类中声明以下变量，用来跟踪请求状态和数据：

// 加载状态
bool _isLoading = false;
// 接口返回的数据列表（假设你的freezed类是Post）
List<Post> _posts = [];
// 错误信息
String? _errorMessage;
// Dio客户端（假设你已经封装好了DioClient）
final DioClient _dioClient = DioClient();

步骤2：实现数据请求方法（GET/POST） #

封装GET和POST请求方法，手动处理请求的开始、成功、失败状态：

// GET请求获取数据
Future<void> _fetchPosts() async {
  _isLoading = true;
  setState(() {}); // 更新加载状态

  try {
    // 调用你的DioClient封装的GET接口
    final response = await _dioClient.getPosts();
    _posts = response;
    _errorMessage = null;
  } catch (e) {
    _errorMessage = e.toString();
    _posts = [];
  } finally {
    _isLoading = false;
    setState(() {}); // 更新最终状态
  }
}

// POST请求提交数据并刷新列表
Future<void> _submitPost(Post newPost) async {
  _isLoading = true;
  setState(() {});

  try {
    // 调用DioClient封装的POST接口
    await _dioClient.createPost(newPost);
    // 提交成功后重新获取列表
    await _fetchPosts();
    _errorMessage = null;
  } catch (e) {
    _errorMessage = "提交失败：${e.toString()}";
  } finally {
    _isLoading = false;
    setState(() {});
  }
}

步骤3：在合适时机发起请求 #

如果是页面加载时自动获取数据，在initState中调用：

@override
void initState() {
  super.initState();
  _fetchPosts(); // 页面初始化时发起GET请求
}

如果是POST请求，通常绑定到按钮点击事件：

ElevatedButton(
  onPressed: () => _submitPost(Post(title: "新帖子", content: "内容")),
  child: const Text("提交帖子"),
)

步骤4：用ListView.Builder构建UI #

根据状态变量渲染不同的UI状态：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text("帖子列表")),
    body: _isLoading
        ? const Center(child: CircularProgressIndicator()) // 加载中UI
        : _errorMessage != null
            ? Center(child: Text(_errorMessage!)) // 错误UI
            : ListView.builder(
                itemCount: _posts.length,
                itemBuilder: (context, index) {
                  final post = _posts[index];
                  return ListTile(
                    title: Text(post.title),
                    subtitle: Text(post.content),
                  );
                },
              ),
    floatingActionButton: FloatingActionButton(
      onPressed: () => _submitPost(Post(title: "新帖子", content: "测试内容")),
      child: const Icon(Icons.add),
    ),
  );
}

结合Freezed类的注意事项 #

1. 确保你的Freezed数据类正确实现了序列化/反序列化，比如配合json_serializable：

@freezed
class Post with _$Post {
  const factory Post({
    required String title,
    required String content,
    String? id,
  }) = _Post;

  factory Post.fromJson(Map<String, dynamic> json) => _$PostFromJson(json);
}

2. DioClient中返回的数据要正确转换为Freezed类实例：

class DioClient {
  final Dio _dio = Dio(BaseOptions(baseUrl: "https://your-api-url.com"));

  Future<List<Post>> getPosts() async {
    final response = await _dio.get("/posts");
    return (response.data as List).map((e) => Post.fromJson(e)).toList();
  }

  Future<void> createPost(Post post) async {
    await _dio.post("/posts", data: post.toJson());
  }
}

关键优势 #

• 完全掌控请求时机，比如可以在下拉刷新、按钮点击时手动触发，比FutureBuilder更灵活
• 状态管理更清晰，能分别处理加载、成功、失败三种状态
• 轻松集成POST等交互类请求，不需要依赖Future的生命周期

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