Flutter：自定義導航欄，如何進行導航，這樣當你切換你點擊的按鈕時？

Question

我需要在查看按鈕后，屏幕與按鈕一起切換。 但是在這里我切換了屏幕，但是按鈕仍然在同一個地方。 如何解決這個問題？ （如果您刪除導航，那么一切都會工作，他們不會切換到屏幕）

導航欄

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),
        ),
    );
  }
}

Answer 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)),

如果沒有，請發表評論。