如何在GetX中每次返回UI前执行DB查询，先获取数据再渲染界面

你当前使用的StatelessWidget无法满足需求，原因有两个：

1. StatelessWidget没有生命周期回调，无法监听页面可见的时机
2. 数据库查询属于异步IO操作，不能同步直接赋值给data变量，会直接返回Future实例而非实际数据

实现方案（推荐：仅页面可见时触发查询） #

该方案只会在页面首次进入、从其他页面返回当前页、应用从后台回到前台时触发查询，性能损耗更低，符合绝大多数业务场景：

• 第一步：将组件改为StatefulWidget，同时混入WidgetsBindingObserver和RouteAware，分别监听应用生命周期和路由跳转回调，覆盖页面可见时的触发方法
• 第二步：定义变量存储查询到的数据，以及加载状态，避免空数据渲染报错
• 第三步：封装数据查询方法，查询成功后调用setState更新UI
• 第四步：在initState中注册监听，首次进入页面时触发查询；在dispose中取消监听避免内存泄漏

完整代码示例 #

import 'package:flutter/material.dart';

class TestScreen extends StatefulWidget {
  const TestScreen({super.key});

  @override
  State<TestScreen> createState() => _TestScreenState();
}

class _TestScreenState extends State<TestScreen> with WidgetsBindingObserver, RouteAware {
  List? _data; // 存储从DB查询到的数据
  bool _isLoading = true; // 加载状态

  // 封装DB查询方法
  Future<void> _fetchDataFromDB() async {
    setState(() {
      _isLoading = true;
    });
    // 执行你的DB查询逻辑，getDataFromDB是你自己的异步查询方法
    final result = await getDataFromDB();
    setState(() {
      _data = result;
      _isLoading = false;
    });
  }

  @override
  void initState() {
    super.initState();
    // 注册生命周期监听
    WidgetsBinding.instance.addObserver(this);
    // 首次进入页面触发查询
    _fetchDataFromDB();
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    // 注册路由监听，用于捕获从其他页面返回当前页面的时机
    RouteObserver.maybeOf(context)?.subscribe(this, ModalRoute.of(context)!);
  }

  // 从其他页面pop回到当前页面时触发
  @override
  void didPopNext() {
    super.didPopNext();
    _fetchDataFromDB();
  }

  // 应用从后台回到前台时触发
  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);
    if (state == AppLifecycleState.resumed) {
      _fetchDataFromDB();
    }
  }

  @override
  void dispose() {
    // 取消监听避免内存泄漏
    WidgetsBinding.instance.removeObserver(this);
    RouteObserver.maybeOf(context)?.unsubscribe(this);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    if (_isLoading) {
      return const Center(child: CircularProgressIndicator());
    }
    if (_data == null || _data!.isEmpty) {
      return const Center(child: Text('暂无数据'));
    }
    return ListView.builder(
      itemCount: _data!.length,
      itemBuilder: (context, index) {
        // 你的列表项渲染逻辑
        return ListTile(
          title: Text(_data![index].toString()),
        );
      },
    );
  }
}

// 你自己的DB查询方法示例
Future<List> getDataFromDB() async {
  // 模拟DB查询耗时
  await Future.delayed(const Duration(milliseconds: 200));
  return ['数据1', '数据2', '数据3'];
}

可选方案：每次UI构建都触发查询 #

如果你确实需要每次build执行前都查询，也可以用FutureBuilder实现，不需要管理状态：

class TestScreen extends StatelessWidget {
  const TestScreen({super.key});

  @override
  Widget build(BuildContext context) {
    // 每次build都会生成新的Future，触发新的查询
    return FutureBuilder(
      future: getDataFromDB(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const Center(child: CircularProgressIndicator());
        }
        if (!snapshot.hasData || snapshot.data!.isEmpty) {
          return const Center(child: Text('暂无数据'));
        }
        return ListView.builder(
          itemCount: snapshot.data!.length,
          itemBuilder: (context, index) {
            return ListTile(title: Text(snapshot.data![index].toString()));
          },
        );
      },
    );
  }
}

注意该方案会在UI每次重绘时都触发DB查询，性能消耗较高，仅适合数据量极小、查询非常快的场景

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