Flutter：如何从其他Widget触发刷新有状态Widget的数据？

方案1：通过更新Future变量触发FutureBuilder刷新 #

在Tab A的StatefulWidget中，将用于FutureBuilder的Future<List<EventInfo>>定义为可更新的成员变量。当收到Tab B的预订成功通知后，重新调用API并通过setState更新该变量，FutureBuilder会自动重新执行Future并刷新UI。

示例代码：

class TabA extends StatefulWidget {
  @override
  State<TabA> createState() => _TabAState();
}

class _TabAState extends State<TabA> {
  late Future<List<EventInfo>> _bookedEventsFuture;

  @override
  void initState() {
    super.initState();
    _bookedEventsFuture = _fetchBookedEvents();
    // 监听自定义预订成功通知
    NotificationListener<BookSuccessNotification>(
      onNotification: (notification) {
        _refreshBookedEvents();
        return true;
      },
    );
  }

  Future<List<EventInfo>> _fetchBookedEvents() async {
    // 调用Rest API获取已预订事件的逻辑
    final response = await http.get(Uri.parse('your-api-url/booked-events'));
    if (response.statusCode == 200) {
      return parseEvents(response.body);
    } else {
      throw Exception('加载已预订事件失败');
    }
  }

  void _refreshBookedEvents() {
    setState(() {
      // 重新赋值Future，触发FutureBuilder重新执行
      _bookedEventsFuture = _fetchBookedEvents();
    });
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<List<EventInfo>>(
      future: _bookedEventsFuture,
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const Center(child: CircularProgressIndicator());
        } else if (snapshot.hasError) {
          return Center(child: Text('错误：${snapshot.error}'));
        } else if (snapshot.hasData) {
          return ListView.builder(
            itemCount: snapshot.data!.length,
            itemBuilder: (context, index) {
              final event = snapshot.data![index];
              return ListTile(title: Text(event.title));
            },
          );
        } else {
          return const Center(child: Text('暂无已预订事件'));
        }
      },
    );
  }
}

方案2：使用状态管理工具（以Provider为例） #

将已预订事件的状态提升到全局或父级状态容器中，Tab B预订成功后更新状态，Tab A监听状态变化自动刷新UI，这种方式解耦性更强，适合复杂场景。

1. 定义状态类：

class BookedEventsProvider extends ChangeNotifier {
  List<EventInfo> _bookedEvents = [];
  bool _isLoading = false;

  List<EventInfo> get bookedEvents => _bookedEvents;
  bool get isLoading => _isLoading;

  Future<void> fetchBookedEvents() async {
    _isLoading = true;
    notifyListeners();
    try {
      final response = await http.get(Uri.parse('your-api-url/booked-events'));
      if (response.statusCode == 200) {
        _bookedEvents = parseEvents(response.body);
      } else {
        throw Exception('加载已预订事件失败');
      }
    } catch (e) {
      // 处理错误逻辑
    } finally {
      _isLoading = false;
      notifyListeners();
    }
  }

  // 预订成功后调用此方法触发刷新
  void onBookSuccess() {
    fetchBookedEvents();
  }
}

2. 在父Widget中提供状态：

class MyTabView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => BookedEventsProvider()..fetchBookedEvents(),
      child: DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: AppBar(bottom: const TabBar(tabs: [Tab(text: '已预订'), Tab(text: '预订')])),
          body: const TabBarView(children: [TabA(), TabB()]),
        ),
      ),
    );
  }
}

3. Tab A中监听状态：

class TabA extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final provider = Provider.of<BookedEventsProvider>(context);
    if (provider.isLoading) {
      return const Center(child: CircularProgressIndicator());
    }
    return ListView.builder(
      itemCount: provider.bookedEvents.length,
      itemBuilder: (context, index) {
        final event = provider.bookedEvents[index];
        return ListTile(title: Text(event.title));
      },
    );
  }
}

4. Tab B预订成功后触发刷新：

// 预订成功回调中
Provider.of<BookedEventsProvider>(context, listen: false).onBookSuccess();
// 切换到Tab A
DefaultTabController.of(context).animateTo(0);

方案3：监听Tab切换事件刷新 #

如果需要每次切换到Tab A时都刷新数据，可以监听TabController的页面切换事件：

class MyTabView extends StatefulWidget {
  @override
  State<MyTabView> createState() => _MyTabViewState();
}

class _MyTabViewState extends State<MyTabView> with SingleTickerProviderStateMixin {
  late TabController _tabController;
  final _tabAKey = GlobalKey<_TabAState>();

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
    _tabController.addListener(() {
      // 切换到Tab A（索引0）时触发刷新
      if (_tabController.index == 0 && !_tabController.indexIsChanging) {
        _tabAKey.currentState?._refreshBookedEvents();
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(bottom: TabBar(controller: _tabController, tabs: const [Tab(text: '已预订'), Tab(text: '预订')])),
      body: TabBarView(controller: _tabController, children: [TabA(key: _tabAKey), TabB()]),
    );
  }
}

内容的提问来源于stack exchange，提问作者D. Mika