Flutter TabView 仅在 Tab 上刷新，而在 Swipe 上不刷新

Question

我正在尝试通过以下挑战改进我的应用程序：我想用最初为空的TabPages（小部件）填充我的选项卡视图，并在单击选项卡或选项卡时在TabViews中执行复杂的操作（例如数据库操作）被刷过。 我现在完成了编程，但仅当我在 TabHeader 上单击选项卡时视图才会刷新，但如果我从一页滑动到另一页则不会刷新。在调试器中，我看到该小部件已被正确的小部件替换，但未显示。它保留在旧的小部件上。

我写了一个小应用程序来显示问题。它有 5 个选项卡，最初填充为 MyDefaultWidget，如果选择，则替换为 MySpecialWidget。这是代码

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My Tab Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  late TabController _tabController;

  List<Tab> myTabHeaders = [];
  List<Widget> myTabPages = [];

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 5, vsync: this);
    _tabController.addListener(myTabControllerListener);

    for (int i = 0; i < 5; i++) {
      myTabHeaders.add(Tab(text: '$i'));
      myTabPages.add(const MyDefaultWidget());
    }
  }

  void myTabControllerListener() {
    if (_tabController.indexIsChanging) {
      int newIndex = _tabController.index;
      setState(() {
        myTabPages[newIndex] = const MySpecialWidget();
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        title: TabBar(
          controller: _tabController,
          indicatorColor: Colors.orange,
          labelColor: Colors.orange,
          unselectedLabelColor: Colors.black54,
          tabs: myTabHeaders,
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: myTabPages,
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text('DEFAULT'),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text('SPECIAL'),
    );
  }
}

如果显示点击 MySpecialWidget。如果显示滑动 MyDefaultWidget。

有什么我忘记配置的吗？我对这种不一致感到有点困惑。预先非常感谢您的帮助！

Answer 1

这确实是

indexIsChanging

属性的行为。来自文档：

在用户点击 TabBar 选项卡时触发的 animateTo 动画期间，该值为 true。当用户拖动（和“猛击”）TabBarView 导致偏移量发生变化时，该值为 false。

如果您想观看控制器的更新，请使用其

addListener

方法。