在实现带有bottomNavigationBar的TabBarView时动态创建内容

时间:2019-02-23 20:07:17

标签: dart flutter flutter-layout

我正在修改Flutter Challenge - Hidden Drawer Menu上的Flutter应用示例。由于AppBar和主体的主UI布局位于zoom_scaffold中,因此我试图添加TabBarView进行用户导航。

下面是我一直在进行修改的zoomAndSlideContent。该应用程序呈现bottomNavigationBar,但是在实现TabBarView来将用户定向到关联的屏幕时遇到了问题。

有人知道如何修改此代码,以便当用户按下导航选项卡时可以更改视图吗?

createContentDisplay () {
return zoomAndSlideContent(
    new Container(
      decoration: new BoxDecoration(
        image: widget.contentScreen.background,
      ),
      child: new Scaffold(
          backgroundColor: Colors.transparent,
          appBar: new AppBar(
            backgroundColor: Colors.transparent,
            elevation: 0.0,
            leading: new IconButton(
                icon: new Icon(Icons.menu),
                onPressed: () {
                  menuController.toggle();
                }
            ),
            title: new Text(
              widget.contentScreen.title,
              style: new TextStyle(
                fontFamily: 'bebas-neue',
                fontSize: 25.0,
              ),
            ),
          ),
          body: widget.contentScreen.contentBuilder(context),
          bottomNavigationBar: new Material(
            color: Colors.blue,
            // set the tab bar as the child of the bottom bar
            child: new TabBar(
              tabs: <Tab>[
                new Tab(
                  //set the icon
                  icon: new Icon(Icons.favorite),
                ),
                new Tab(
                  icon: new Icon(Icons.adb),
                ),
                new Tab(
                  icon: new Icon(Icons.airport_shuttle),
                )
              ],
              controller: controller,
            ),
          ),
      ),
    )
);
}

0 个答案:

没有答案