自定义 Flutter 标签栏

Question

我想构建一个标签栏，当用户移动到另一个标签时，未选中标签的图标会发生变化，当用户选择它时，图标会发生变化，例如：- 我有一个标签栏，其中有两个标签第一个是 home 第二个是 cart 。当用户从主页移动到购物车时，主页图标会更改为设置或我想要的其他图标。我该如何实现

Answer 1

其实很简单！！我认为您应该使用 Column 和 PageView 来显示您想要的不同选项卡。要在这些选项卡之间移动，您可以使用一行并在其中放置一些小部件，例如图标按钮或我在以下代码中使用的类似东西。整体结构如下 --

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  PageController _pageController = PageController();

  @override
  void initState() {
    super.initState();
    _pageController = PageController();
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  int _index = 0;

  static const _iconList = <Icon>[
    Icon(Icons.home_rounded),
    Icon(Icons.chat_rounded),
    Icon(FontAwesomeIcons.youtube),
    Icon(Icons.person_rounded)
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Expanded(
              child: PageView(
                controller: _pageController,
                children: const [
                  HomeTab(),
                  MessageTab(),
                  YouTubeTab(),
                  ProfileTab(),
                ],
              ),
            ),
            CurvedNavigationBar(
              items: _iconList,
              index: _index,
              onTap: (index) {
                setState(() {
                  _index = index;
                });
                _pageController.animateToPage(index,
                    duration: const Duration(milliseconds: 300),
                    curve: Curves.easeOutCubic);
              },
              backgroundColor: AppColors.color1.withOpacity(.3),
              height: 55,
            ),
          ],
        ),
      ),
    );
  }
}

我在这里为 CurvedNavigationBar 使用了 this 包。您可以将 HomeTab 和其他页面替换为您自己的页面。

自定义 Flutter 标签栏

Custom Flutter tab bar

tabs

flutter