flutter 我有问题与底部appbar自定义

pnwntuvh  于 2023-04-13  发布在  Flutter
关注(0)|答案(1)|浏览(157)

我想让这个底部appbar。

但我做的是这样的形状

现在,当我尝试给予左到右填充,使其看起来像第一个图像时,它会得到wrong.you可以看到添加填充后的图片:

class Test2 extends StatelessWidget {
  const Test2({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
    
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  floatingActionButton: FloatingActionButton(
    backgroundColor: Colors.white,
    child: const Icon(Icons.ac_unit_sharp,color: Colors.black,),
    onPressed: () {
     
    },
    
  ),
  bottomNavigationBar: Padding(
    padding: const EdgeInsets.only(left:8.0,right: 8),
    child: BottomAppBar(
      shape: CircularNotchedRectangle(),
      color: Colors.red,
      child: Container(
        height: 60,
      ),
    ),
  ),
      body: Column(
        children: [
        ],
      ),
    );
  }
}

能帮我一下吗?

ibrsph3r

ibrsph3r1#

编辑1:根据@YeasinSheikh的评论,请尝试以下操作,将填充添加到导航栏本身和FAB。
EDIT 2:一个新的解决方案来解决前一个的问题。

class Test2 extends StatelessWidget {
  const Test2({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.white,
        child: const Icon(
          Icons.ac_unit_sharp,
          color: Colors.black,
        ),
        onPressed: () {},
      ),
      bottomNavigationBar: BottomAppBar(
          notchMargin: 8,
          shape: const CircularNotchedRectangle(),
          color: Colors.red,
          child: Column(mainAxisSize: MainAxisSize.min, children: [
            Row(children: [
              Container(
                  height: 60,
                  width: 8,
                  color: Theme.of(context).scaffoldBackgroundColor),
              Expanded(child: Container(height: 60)),
              Container(
                  height: 60,
                  width: 8,
                  color: Theme.of(context).scaffoldBackgroundColor),
            ]),
            Container(height: 8, width: double.infinity, color: Theme.of(context).scaffoldBackgroundColor),
          ])),
      body: Column(
        children: [],
      ),
    );
  }
}

相关问题