Question

如何使用浮动按钮在底栏上设置填充。浮动按钮与底部栏重叠。

return new Scaffold(
      appBar: AppBar(title: const Text('Bottom App Bar')),
      floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        backgroundColor: Colors.red,
        onPressed: () {},
      ),
      bottomNavigationBar: BottomAppBar(
        shape: CircularNotchedRectangle(),
        notchMargin: 5.0,
        elevation: 5.0,
        child: new BottomNavigationBar(
            type: BottomNavigationBarType.fixed,
            items: [
          BottomNavigationBarItem(
            icon: new Icon(Icons.home),
            title: new Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: new Icon(Icons.mail),
            title: new Text('Messages'),
          ),
          BottomNavigationBarItem(
            icon: new Icon(Icons.mail),
            title: new Text('Messages'),
          ),
        ]),
      ),
    );

这是一个例子。谢谢您的帮助

请帮助！

Answer 1

尝试

@override
Widget build(BuildContext context) {
    return Scaffold(

  body: PageStorage(
    child: currentScreen,
    bucket: bucket,
  ),

  floatingActionButton: FloatingActionButton(
    child: Icon(Icons.all_inclusive),
    tooltip: 'Increment',
    elevation: 2.0,
    backgroundColor: Colors.purple[900],
    onPressed: (){


      setState(() {
        currentScreen=Profile();
        currentTab = 0;
      },
      );
    },

  ),

  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  bottomNavigationBar: BottomAppBar(

    notchMargin: 7,
    shape: CircularNotchedRectangle(),

    child: Container(
      // color: Colors.black12,
      // color: Colors.deepPurple[500],
        height: 60,
        child: Row(
      mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Row(

              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                MaterialButton(

                  // minWidth: 40,
                  onPressed: (){
                    setState(() {
                      currentScreen=Profile();
                      currentTab = 0;
                    },
                    );
                  },
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Icon(Icons.group,color: currentTab ==0 ? Colors.blue:Colors.grey[500]),
                      Text('Profile',style: TextStyle(color: currentTab ==0 ? Colors.blue:Colors.grey[500],
                      ),
                      )
                    ],
                  ),
                ),
                MaterialButton(
                  // minWidth: 40,
                  onPressed: (){
                    setState(() {
                      currentScreen=About();
                      currentTab = 2;
                    },);
                  },
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Icon(Icons.perm_contact_calendar,color: currentTab ==2 ? Colors.blue:Colors.grey[500]),
                      Text('Contact',style: TextStyle(color: currentTab ==2 ? Colors.blue:Colors.grey[500]),
                      ),
                    ],
                  ),
                )
              ],
            ),
            // SizedBox(width: 48,),
            Row(
              // mainAxisSize: MainAxisSize.max,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                MaterialButton(
                  // minWidth: 40,
                  onPressed: (){
                    setState(() {
                      currentScreen=About();
                      currentTab = 1;
                    },);
                  },
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Icon(Icons.info_outline,color: currentTab ==1 ? Colors.blue:Colors.grey[500]),
                      Text('About',style: TextStyle(color: currentTab ==1 ? Colors.blue:Colors.grey[500],
                      ),
                      )
                    ],
                  ),
                ),
                MaterialButton(
                  // minWidth: 40,
                  onPressed: (){
                    setState(() {
                      currentScreen=Noti();
                      currentTab = 3;
                    },);
                  },
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Icon(Icons.notifications,color: currentTab ==3 ? Colors.blue:Colors.grey[500]),
                      Text('Notification',style: TextStyle(color: currentTab ==3 ? Colors.blue:Colors.grey[500],
                      ),
                      )
                    ],
                  ),
                ),
              ],
            )

          ],
        )
    ),

  ),


);

}

我刚刚为bottomnav栏中的项目创建了 2个不同的行

即一左一右就这样

Answer 2

BottomAppBar的顶部可以有一个缺口，可以为重叠的FloatingActionButton腾出空间。

您应该使用BottomNavigationBar而不是BottomAppBar，并且浮动操作按钮将位于导航栏上方

浮动Floatingbutton重叠底部导航栏项目

2 个答案: