Dart 如何在颤振中使用BottomAppBar进行导航

我是个新手， 我已经创建了一个很好的底部AppBar和一个停靠的FAB，但是我也想使用这个AppBar进行页面导航。我用底部导航栏尝试过，但后来我丢失了停靠的浮动操作按钮。我如何实现底部应用程序栏的导航

floatingActionButton: Container(
        height: 65.0,
        width: 65.0,
        child: FittedBox(
          child: FloatingActionButton(

        onPressed: (){},
        child: Icon(Icons.add, color: Colors.white,),
        // elevation: 5.0,
      ),
        ),
      ),


      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
        // elevation: 20.0,

        shape: CircularNotchedRectangle(),
        child: Container( 
          height: 75,
          child: Row( 

        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,

        children: <Widget>[
          IconButton(
            iconSize: 30.0,
            padding: EdgeInsets.only(left: 28.0),
            icon: Icon(Icons.home),
            onPressed: () {
              setState(() {
                currentIndex = 0;
              });
            },
          ),

          IconButton(            
            iconSize: 30.0,
            padding: EdgeInsets.only(right: 28.0),
            icon: Icon(Icons.search),
            onPressed: () {
               setState(() {
                currentIndex = 1;
                print("${currentIndex}");

              });
            },
          ),
          IconButton(
            iconSize: 30.0,
            padding: EdgeInsets.only(left: 28.0),
            icon: Icon(Icons.notifications),
            onPressed: () {
               setState(() {
                currentIndex = 2;
                print("${currentIndex}");

              });
            },
          ),
          IconButton(
            iconSize: 30.0,
            padding: EdgeInsets.only(right: 28.0),
            icon: Icon(Icons.list),
            onPressed: () {
               setState(() {
                currentIndex = 3;
                print("${currentIndex}");
              });
            },
          )
        ],
      ),
        )
      )

floatingActionButton:容器(
身高：65.0，
宽度：65.0，
孩子：FittedBox(
子：浮动操作按钮(
按下：（）{}，
子：图标（Icons.add，颜色：Colors.white，），
//标高：5.0，
),
),
),
floatingActionButtonLocation:floatingActionButtonLocation.centerDocked，
bottomNavigationBar:BottomAppBar(
//标高：20.0，
形状：CircularNotchedRectangle（），
儿童：货柜（
身高：75，
儿童：第（
mainAxisSize:mainAxisSize.max，
mainAxisAlignment:mainAxisAlignment.spaceBetween，
儿童：[
图标按钮(
iconSize:30.0，
填充：仅限边缘设置（左侧：28.0），
图标：图标（Icons.home），
已按下：（）{
设置状态（）{
currentIndex=0；
});
},
),
图标按钮（
iconSize:30.0，
填充：仅限边缘设置（右侧：28.0），
图标：图标（Icons.search），
已按下：（）{
设置状态（）{
currentIndex=1；
打印（“${currentIndex}”）；
});
},
),
图标按钮(
iconSize:30.0，
填充：仅限边缘设置（左侧：28.0），
图标：图标（图标。通知），
已按下：（）{
设置状态（）{
currentIndex=2；
打印（“${currentIndex}”）；
});
},
),
图标按钮(
iconSize:30.0，
填充：仅限边缘设置（右侧：28.0），
图标：图标（Icons.list），
已按下：（）{
设置状态（）{
当前指数=3；
打印（“${currentIndex}”）；
});
},
)
],
),
)
)

您可以使用相同的支架为您的身体使用

开关盒

，如

选项卡控制器

或

单选按钮

。 只需在按下bottomAppBar图标时更新主体。

---

查看链接以便更好地理解。：）

一种方法是使用-widget

带有编码的BottomAppBar的示例代码

class _DemoPageState extends State<FormPage> {
  PageController _myPage = PageController(initialPage: 0);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
        shape: CircularNotchedRectangle(),
        child: Container(
          height: 75,
          child: Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              IconButton(
                iconSize: 30.0,
                padding: EdgeInsets.only(left: 28.0),
                icon: Icon(Icons.home),
                onPressed: () {
                  setState(() {
                    _myPage.jumpToPage(0);
                  });
                },
              ),
              IconButton(
                iconSize: 30.0,
                padding: EdgeInsets.only(right: 28.0),
                icon: Icon(Icons.search),
                onPressed: () {
                  setState(() {
                    _myPage.jumpToPage(1);
                  });
                },
              ),
              IconButton(
                iconSize: 30.0,
                padding: EdgeInsets.only(left: 28.0),
                icon: Icon(Icons.notifications),
                onPressed: () {
                  setState(() {
                    _myPage.jumpToPage(2);
                  });
                },
              ),
              IconButton(
                iconSize: 30.0,
                padding: EdgeInsets.only(right: 28.0),
                icon: Icon(Icons.list),
                onPressed: () {
                  setState(() {
                    _myPage.jumpToPage(3);
                  });
                },
              )
            ],
          ),
        ),
      ),
      body: PageView(
        controller: _myPage,
        onPageChanged: (int) {
          print('Page Changes to index $int');
        },
        children: <Widget>[
          Center(
            child: Container(
              child: Text('Empty Body 0'),
            ),
          ),
          Center(
            child: Container(
              child: Text('Empty Body 1'),
            ),
          ),
          Center(
            child: Container(
              child: Text('Empty Body 2'),
            ),
          ),
          Center(
            child: Container(
              child: Text('Empty Body 3'),
            ),
          )
        ],
        physics: NeverScrollableScrollPhysics(), // Comment this if you need to use Swipe.
      ),
      floatingActionButton: Container(
        height: 65.0,
        width: 65.0,
        child: FittedBox(
          child: FloatingActionButton(
            onPressed: () {},
            child: Icon(
              Icons.add,
              color: Colors.white,
            ),
            // elevation: 5.0,
          ),
        ),
      ),
    );
  }
}

class\u DemoPageState扩展状态{
PageController _myPage=PageController（初始页：0）；
@凌驾
小部件构建（构建上下文）{
返回脚手架(
floatingActionButtonLocation:floatingActionButtonLocation.centerDocked，
bottomNavigationBar:BottomAppBar(
形状：CircularNotchedRectangle（），
子：容器(
身高：75，
孩子：排(
mainAxisSize:mainAxisSize.max，
mainAxisAlignment:mainAxisAlignment.spaceBetween，
儿童：[
图标按钮(
iconSize:30.0，
填充：仅限边缘设置（左侧：28.0），
图标：图标（Icons.home），
已按下：（）{
设置状态（）{
_myPage.jumpToPage（0）；
});
},
),
图标按钮(
iconSize:30.0，
填充：仅限边缘设置（右侧：28.0），
图标：图标（Icons.search），
已按下：（）{
设置状态（）{
_myPage.jumpToPage（1）；
});
},
),
图标按钮(
iconSize:30.0，
填充：仅限边缘设置（左侧：28.0），
图标：图标（图标。通知），
已按下：（）{
设置状态（）{
_myPage.jumpToPage（2）；
});
},
),
图标按钮(
iconSize:30.0，
填充：仅限边缘设置（右侧：28.0），
图标：图标（Icons.list），
已按下：（）{
设置状态（）{
_myPage.jumpToPage（3）；
});
},
)
],
),
),
),
正文：页面视图(
控制器：_myPage，
onPageChanged:（int）{
打印（'Page Changes to index$int'）；
},
儿童：[
居中(
子：容器(
子项：文本（“空正文0”），
),
),
居中(
子：容器(
子项：文本（“空正文1”），
),
),
居中(
子：容器(
子项：文本（'Empty Body 2'），
),
),
居中(
子：容器(
子项：文本（“空正文3”），
),
)
],
物理：NeverScrollableScrollPhysics（），//如果需要使用滑动，请对此进行注释。
),
浮动操作按钮：容器(
身高：65.0，
宽度：65.0，
孩子：FittedBox(
子：浮动操作按钮(
按下：（）{}，
子：图标(
Icons.add，
颜色：颜色，白色，
),
//标高：5.0，
),
),
),
);
}
}

底部AppBar和底部导航栏之间的区别在于，对于最后一个按钮，您可以在单击下面的图标时设置要呈现的子项（页面）列表（onTap方法）。使用

BottomAppBar

，您必须设置一个

Navigator

方法，在UI/UX-therms中，我认为这不是很好