无法在 flutter 中向自定义底部导航添加操作

Question

我正在使用 convex_bottom_bar 小部件作为底部导航，我在应用程序中成功添加了它，但我找不到如何在按下选项卡时添加操作，我的意思是在更改视图时更改视图查看，在文档中我也找不到任何东西，我想学习如何在更改选项卡上更改数据

class BottomButtons extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ConvexAppBar(
      items: [
        TabItem(icon: Icons.home, title: 'Home'),
        TabItem(icon: Icons.map, title: 'Discovery'),
        TabItem(icon: Icons.add, title: 'Add'),
        TabItem(icon: Icons.message, title: 'Message'),
        TabItem(icon: Icons.people, title: 'Profile'),
      ],
      initialActiveIndex: 2, //optional, default as 0
      onTap: (int i) => print('click index=$i'),
    );
  }
}

Answer 1

您需要一个 DefaultTabController。

import 'package:convex_bottom_bar/convex_bottom_bar.dart';
import 'package:flutter/material.dart';

class TestConvexBar extends StatelessWidget {
  TabController _tabController;

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      child: Scaffold(
        bottomNavigationBar: ConvexAppBar(
          controller: _tabController,
          items: [
            TabItem(
                icon: Icons.home, title: 'Home'),
            TabItem(
                icon: Icons.map,
                title: 'Discovery'),
            TabItem(
                icon: Icons.add, title: 'Add'),
            TabItem(
                icon: Icons.message,
                title: 'Message'),
            TabItem(
                icon: Icons.people,
                title: 'Profile'),
          ],
          initialActiveIndex:
              2, //optional, default as 0
          onTap: (int i) =>
              print('click index=$i'),
        ),
        body: TabBarView(
          controller: _tabController,
          children: [
            Icon(Icons.home),
            Icon(Icons.map),
            Icon(Icons.add),
            Icon(Icons.message),
            Icon(Icons.people),
          ],
        ),
      ),
      length: 5,
    );
  }
}

无法在 flutter 中向自定义底部导航添加操作

Not Able add action to the custom bottom navigation in flutter

flutter

bottomnavigationview