使用IndexedStack来切换TabPage

IndexedStack 是一个控件，可以用来在多个子控件之间进行切换，与 Stack 不同，IndexedStack 只会显示其中一个子控件，并根据提供的索引值决定要显示哪个子控件。

IndexedStack 的构造函数如下：

IndexedStack({
  Key? key,
  int index = 0,
  AlignmentGeometry alignment = Alignment.topLeft,
  TextDirection? textDirection,
  StackFit sizing = StackFit.loose,
  List<Widget> children = const <Widget>[],
}) 

其中，参数 index 表示要显示的子控件的索引值，默认值为 0，表示显示第一个子控件。

下面是一个简单的示例，展示了如何使用 IndexedStack：

IndexedStack(
  index: _selectedIndex,
  children: [
    Container(
      color: Colors.red,
      child: Center(
        child: Text('Page 1'),
      ),
    ),
    Container(
      color: Colors.blue,
      child: Center(
        child: Text('Page 2'),
      ),
    ),
    Container(
      color: Colors.green,
      child: Center(
        child: Text('Page 3'),
      ),
    ),
  ],
)

在上面的示例中，IndexedStack 包含了三个子控件，分别是三个不同颜色的 Container，并且当前要显示的子控件的索引值为 _selectedIndex。

因此，我们可以通过IndexedStack来设置TabPage页面的切换

class MainPage extends GetView<MainController> {
  MainPage({super.key});

  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
    return Obx(() => Scaffold(
      body: IndexedStack(
        alignment: Alignment.topCenter,
        sizing: StackFit.loose,
        index: controller.getCurrentIndex(controller.currentTab.value),
        children: [
          const HomeTabPage(),//首页
          const MessageTabPage(),//消息
          const MineTabPage(),    //个人中心
        ],
      ),
      resizeToAvoidBottomInset: false,
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: controller.getCurrentIndex(controller.currentTab.value),
        onTap: (index) => controller.switchTab(index),
        iconSize: 0.0,
        selectedFontSize: 10,
        unselectedFontSize: 10,
        elevation: 8,
        fixedColor: Theme.of(context).colorScheme.primary,
        //选中颜色
        enableFeedback: true,
        backgroundColor: Colors.white,
        type: BottomNavigationBarType.fixed,
        items: [
          BottomBarItem(
            title: '首页',
            imageName: 'assets/images/icon_tab_home.png',
            activeImageName: 'assets/images/icon_tab_home_selected.png',
            badge: controller.badges[0],
          ),
          BottomBarItem(
            title: '消息中心',
            imageName: 'assets/images/icon_tab_message.png',
            activeImageName: 'assets/images/icon_tab_message_selected.png',
            badge: controller.badges[1],
          ),
          BottomBarItem(
            title: '个人中心',
            imageName: 'assets/images/icon_tab_mine.png',
            activeImageName: 'assets/images/icon_tab_mine_selected.png',
            badge: controller.badges[2],
          ),
        ],
      ),
    ));
  }
}

可以使用Obx或GetBuilder等GetX提供的状态管理工具，监听子Widget的状态变化来进行操作。