Flutter：自定义导航栏，如何做导航，这样当你切换你点击的按钮的时候？答案

【问题标题】：Flutter: Custom Nav Bar, how to make navigation, so that when you switch the button that you clicked on?Flutter：自定义导航栏，如何做导航，这样当你切换你点击的按钮的时候？
【发布时间】：2022-01-17 17:12:34
【问题描述】：

我需要在查看按钮后，屏幕与按钮一起切换。但是这里我切换了屏幕，但是按钮还在原处。

导航栏：

如何解决这个问题？（如果您删除导航，那么一切都会工作，他们不会切换到屏幕）

import 'package:flutter/material.dart';

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

  @override
  _buildNavBarItemState createState() => _buildNavBarItemState();
}

class _buildNavBarItemState extends State<buildNavBarItem> {

  late int _selectedItemIndex;

  @override
  Widget build(BuildContext context) {
    return 
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        NavBarItem(UniconsLine.pen, 0, PravoMainScreen()),
        NavBarItem(UniconsLine.home_alt, 1, OrganizationScreen()),
        NavBarItem(UniconsLine.setting, 2, JusticeMainScreen()),
      ],
    );
  }
  Widget NavBarItem(IconData icon, int index, Widget screen) {
    return GestureDetector(
      onTap: () {
        setState(() {
          _selectedItemIndex = index;
        });
     Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => screen)
        );}, // Here it goes to another screen, but the button returns to the original
      child: Container(
          height: 50.0,
          width: MediaQuery.of(context).size.width / 5.5,
          decoration: BoxDecoration(
            color: index == _selectedItemIndex ? Colors.white: Color(0xFF007FFF),
            borderRadius: BorderRadius.circular(20),
          ),
          child: Icon(icon, size: 44, color: index == _selectedItemIndex ? Color(0xFF007FFF): Colors.white),
        ),
    );
  }
}

【问题讨论】：

标签： java android flutter dart flutter-animation

【解决方案1】：

我不确定我是否理解正确，但如果你的意思是屏幕没有通过导航栏导航到被调用的屏幕，我想我可以提供帮助。我总是制作一个文件，其中构建器看起来像这样：

return Scaffold(
      body: Stack(
        children: [
          pageList[widget.pageIndex],
        ],
      ),
      bottomNavigationBar:BottomNavigationBar(),
);

在 pageList 我有我的所有屏幕，在底部导航栏中我有图标。 onTap 调用 setstate 然后更改索引。此外，图标的颜色是由索引控制的，这意味着我会这样做：

decoration: value == widget.pageIndex
                            ? BoxDecoration(
                                color: primaryColor,
                                borderRadius: BorderRadius.circular(90),
                              )
                            : BoxDecoration(
                                color: backgroundColor,
                                borderRadius: BorderRadius.circular(90)),

如果没有，请发表评论。

【讨论】：