首页 > 解决方案 > 底部导航栏

问题描述

我有一个问题..我创建了 2 个 dart 文件,一个用于主页,它有材料应用程序和一个带有主体的脚手架..另一个文件在带有主体的脚手架中的底部导航栏。主页在抽屉里有一个开关,我用它在深色和浅色主题之间切换。当我使用开关时,所有小部件的颜色都会发生变化,但底部导航栏会发生变化,并且只有在我单击底部导航栏时才会发生变化。所以我需要知道我做了什么来直接改变栏的颜色..

这是主页文件的代码

 class MainPageState extends State<MainPage> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: theme ? darkTheme : lightTheme,
      home: Scaffold(
        backgroundColor: theme ? Colors.blueGrey[900] : Colors.white,
        appBar: AppBar(
          centerTitle: true,
          title: Text(
            "DSC World",
            style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
          ),
        ),
        body: ListView(
          padding: EdgeInsets.fromLTRB(15, 20, 15, 0),
          shrinkWrap: true,
          physics: ScrollPhysics(),
          children: [
            GridView.builder(
              physics: NeverScrollableScrollPhysics(),
              shrinkWrap: true,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                mainAxisSpacing: 25,
                crossAxisSpacing: 25,
                crossAxisCount: 2,
              ),
              itemBuilder: (context, index) => myCard(
                  context,
                  photo1[index]["photo"],
                  names[index]["name"],
                  func[index]["func"]),
              itemCount: photo1.length,
            ),
            SizedBox(
              height: 25,
            ),
            Container(
              margin: EdgeInsets.fromLTRB(85, 0, 85, 0),
              height: 275,
              child: GridView.builder(
                physics: NeverScrollableScrollPhysics(),
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 1,
                ),
                itemBuilder: (context, index) =>
                    myCard(context, 'images/anc_g2.png', "Antarctica", Antr()),
                itemCount: 1,
              ),
            ),
          ],
        ),
        drawer: Drawer(
          child: ListView(
            children: [
              Card(
                color: theme ? Colors.white30 : Colors.blueGrey,
                child: DrawerHeader(
                  child: Column(
                    children: [
                      Expanded(child: Image.asset('images/logo1.png')),
                      Text(
                        "The Earth",
                        style: TextStyle(
                            fontWeight: FontWeight.bold, fontSize: 16),
                      )
                    ],
                  ),
                ),
              ),
              Column(
                children: [
                  SizedBox(
                    height: 50,
                  ),
                  Card(
                    elevation: 5,
                    color: theme ? Colors.white30 : Colors.blueGrey,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          "  Dark Theme",
                          style: TextStyle(
                            fontSize: 16,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        Switch(
                          value: theme,
                          onChanged: (x) {
                            setState(() {
                              theme = x;
                            });
                          },
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
} 

//and this is the code of the bottom navigation bar file

class BottomNavBar extends StatefulWidget {
  @override
  _BottomNavBarState createState() => _BottomNavBarState();
}

List pages = [MainPage(), FavoritePage()];

class _BottomNavBarState extends State<BottomNavBar> {
  int currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: pages[currentIndex],
      bottomNavigationBar: BottomNavyBar(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        backgroundColor: theme ? Colors.blueGrey[800] : Color(0xff5B7BA6),
        onItemSelected: (index) {
          setState(() {
            currentIndex = index;
          });
        },
        selectedIndex: currentIndex,
        items: [
          BottomNavyBarItem(
            activeColor: Colors.white,
            inactiveColor: Colors.black54,
            textAlign: TextAlign.center,
            title: Text("Home"),
            icon: Icon(
              Icons.home,
            ),
          ),
          BottomNavyBarItem(
            activeColor: Colors.white,
            inactiveColor: Colors.black54,
            textAlign: TextAlign.center,
            title: Text("Favorite"),
            icon: Icon(
              Icons.star,
            ),
          ),
        ],
      ),
    );
  }
}

标签: flutter

解决方案


推荐阅读