Flutter：使用 ConvexBottomBar 包的意外行为

Question

我使用 ConvexBottomBar 作为底部导航栏的包。我有两个问题，它们的解决方案不兼容：

1. 没有

   selectedIndex

   ，所以当我手动更改页面（向左或向右滑动）时，标签栏不会更新。

为了解决这个问题，我添加了一个

onChanged()

方法，可以在每个视图可见时更新选项卡栏：

void _onPageChanged(int index) {
    _appBarKey.currentState!.tap(index);
  }

2. 无法直接从索引 0 移动到 2，反之亦然。当显示中心视图时页面选项卡会更新，它将选项卡设置为索引 1。

解决方案是删除

onChanged()

方法，但选项卡不会更新。

在我看来，这两个错误的解决方案是不兼容的。但应该有我能做的事情。这是我的整个小部件状态：

class GameShellViewState extends State<GameShellView> {
  final PageController _pageController = PageController(initialPage: 1);

  void _onPageChanged(int index) {
    _appBarKey.currentState!.tap(index);
  }

  void _onTap(int index) {
    _pageController.animateToPage(index,
        duration: const Duration(milliseconds: 300), curve: Curves.easeOut);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBody: true,
      body: PageView(
        controller: _pageController,
        onPageChanged: _onPageChanged,
        children: const [
          CareerView(),
          EducationView(),
          VidaView(),
        ],
      ),
      bottomNavigationBar: ConvexAppBar(
        key: _appBarKey,
        elevation: 0,
        style: TabStyle.reactCircle,
        items: const [
          TabItem(icon: Icons.work, title: 'Career'),
          TabItem(icon: Icons.school, title: 'Education'),
          TabItem(icon: Icons.heart_broken, title: 'Vida'),
        ],
        initialActiveIndex: 2,
        onTap: _onTap,
        backgroundColor: Theme.of(context).colorScheme.surfaceVariant,
        activeColor: Theme.of(context).colorScheme.primary,
        color: Theme.of(context).colorScheme.primary,
      ),
    );
  }
}

Answer 1

_onPageChanged() 和 _onTap() 方法都需要 int 索引，因此我们可以将这 2 个方法替换为一个：

_changePage(int index){
  _appBarKey.currentState!.tap(index);
  _pageController.animateToPage(index,
    duration: const Duration(milliseconds: 300), curve: Curves.easeOut);
}

然后在PageView中使用这个方法

Scaffold(
  extendBody: true,
  body: PageView(
    controller: _pageController,
    onPageChanged: _changePage,
    ...
  ),

和ConvexAppBar：

ConvexAppBar(
    ...
    onTap: _changePage,
    ...
  ),