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

Question

我正在使用凸_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,
    );
  }
}