顶部带有活动图标的导航？

Question

首先，我使用AppBar来更改页面，但是我注意到BottomNavBar具有更好的属性。但是，如果有人给我一个提示来在屏幕顶部创建导航，那将是很棒的。 此BottomNavBar无法正常工作，并显示错误消息“每个孩子必须放置一次”：

  Widget build(BuildContext context) {
    return new Scaffold(
      //appBar: bar(context),
      body: new Container(
        key: _formKey,
        padding: const EdgeInsets.all(30),
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Positioned(
                bottom: 0.0,
                left: 0.0,
                right: 0.0,
                child: BottomNavigationBar(
                  items: <BottomNavigationBarItem>[
                    new BottomNavigationBarItem(
                        icon: const Icon(Icons.home), title: new Text("Home")),
                    new BottomNavigationBarItem(
                        icon: const Icon(Icons.work),
                        title: new Text("Self Help")),
                    new BottomNavigationBarItem(
                        icon: const Icon(Icons.face),
                        title: new Text("Profile"))
                  ],
                  selectedItemColor: colorGold,
                )),
          ],
        ),
      ),
    );
  }
}

这是我的AppBar，我尝试在其中更改活动图标的颜色：

AppBar(
      automaticallyImplyLeading: false,
      title: Center(
          child: Row(mainAxisAlignment: MainAxisAlignment.center, children: <
              Widget>[
        iconButton(
            Icons.home,
            ),
        iconButton(
            Icons.work,
            ),
        iconButton(
            Icons.face,
            )),]))```

Answer 1

如果我没记错的话，那么您应该这样做：

在应用栏中使用PreferredSize小部件

完整代码：

class TabBarHomeScreen extends StatefulWidget {
  @override
  _TabBarHomeScreenState createState() => _TabBarHomeScreenState();
}

class _TabBarHomeScreenState extends State<TabBarHomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Top Navigation tab bar demo"),
      ),
      body: TopNavigationBar(),
    );
  }
}


class TopNavigationBar extends StatefulWidget {
  @override
  _TopNavigationBarState createState() => _TopNavigationBarState();
}

class _TopNavigationBarState extends State<TopNavigationBar> with SingleTickerProviderStateMixin  {
  int tabIndex = 0;

  @override
  Widget build(BuildContext context) {

    return Scaffold( 
      appBar:PreferredSize(
        preferredSize: Size.fromHeight(kToolbarHeight),
        child: BottomNavigationBar(
            //elevation: 0.0,
            items:  <BottomNavigationBarItem>[
              BottomNavigationBarItem(
                icon: Icon(Icons.home, color: Colors.grey,),
                activeIcon: Icon(Icons.home, color: Colors.blue,),
                title: Text('')
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.mail, color: Colors.grey,),
                activeIcon: Icon(Icons.mail, color: Colors.blue,),
                title: Text('')
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.account_circle, color: Colors.grey,),
                activeIcon: Icon(Icons.account_circle, color: Colors.blue,),
                title: Text('')
              )
            ],
            currentIndex: tabIndex,
            selectedItemColor: Colors.blueAccent,
            onTap: (int index){
              setState(() {
                tabIndex = index;
              });
            },
          ),

      ),
      body:  Container(
      color: Colors.white,
      child: tabIndex ==0 ?MyHomeScreen() 
      :tabIndex == 1? MyMailScreen(): MyProfileScreen()
    ),

    );
  }
}

class MyHomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child:Text("My Home Screen")

      ),
    );
  }
}

class MyMailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child:Text("My Mail Screen")

      ),
    );
  }
}

class MyProfileScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child:Text("My Profile Screen")

      ),
    );
  }
}