使用BottomNavigationBar的嵌套导航(使用PageView)

时间:2018-07-14 11:26:07

标签: flutter flutter-layout

i solved the problem

我有一个由标签组成的页面。我想将子页面添加到其中一些选项卡中。 BottomNavigationBar 字段不会显示在底部页面中。我怎么解决这个问题?如何使用 PageView 解决该问题?预先感谢您的帮助。

return Scaffold(
      body: new PageView(
          children: [
            new OneScreen(),
            new TwoScreen(),
            new ThreeScreen(),
            new FourScreen()
          ],
          controller: pageController,
          onPageChanged: onPageChanged
      ),
        bottomNavigationBar: new Theme(
          data: Theme.of(context).copyWith(
            disabledColor: Colors.red,
            // sets the background color of the `BottomNavigationBar`
              canvasColor: Colors.blue,
              // sets the active color of the `BottomNavigationBar` if `Brightness` is light
              primaryColor: Colors.white,
              textTheme: Theme
                  .of(context)
                  .textTheme
                  .copyWith(caption: new TextStyle(color: Colors.white30))
          ),
          child: new BottomNavigationBar(
              type: BottomNavigationBarType.fixed,
              items: [
                new BottomNavigationBarItem(
                  icon: page == 0 ?
                  new ImageIcon(new AssetImage("tabIcons/one@3x.png"))
                      :
                  new ImageIcon(new AssetImage("tabIcons/oneActive@3x.png")),
                  title: new Text("One"),
                ),
                new BottomNavigationBarItem(
                  icon: page == 1 ?
                  new ImageIcon(new AssetImage("tabIcons/two@3x.png"))
                      :
                  new ImageIcon(new AssetImage("tabIcons/twoActive@3x.png")),
                  title: new Text("Two"),
                ),
                new BottomNavigationBarItem(
                  icon: page == 2 ?
                  new ImageIcon(new AssetImage("tabIcons/three@3x.png"))
                      :
                  new ImageIcon(new AssetImage("tabIcons/threeActive@3x.png")),
                  title: new Text("Three"),
                ),
                new BottomNavigationBarItem(
                  icon: page == 3 ?
                  new ImageIcon(new AssetImage("tabIcons/four@3x.png"))
                      :
                  new ImageIcon(new AssetImage("tabIcons/fourActive@3x.png")),
                  title: new Text("Four"),
                )
              ],
              onTap: onTap,
              currentIndex: page
          ),
        )
    )

0 个答案:

没有答案