繁体   English   中英

如何在 flutter 中实现圆底Appbar?

[英]How to implement rounded bottomAppbar in flutter?

我想创建一个像这样的圆形底部应用栏。
圆形BottomAppBar:

1

但它看起来像这样......编码的BottomAppBar:

2 我如何摆脱那个白色的部分?

    return ClipRRect(
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(25),
        topRight: Radius.circular(25),
        bottomRight: Radius.circular(25),
        bottomLeft: Radius.circular(25),
      ),
      child: Padding(
        padding: const EdgeInsets.only(bottom:20.0),
        child: BottomAppBar(
    
   shape: CircularNotchedRectangle(),
   child: new Row(
        
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        
        children: <Widget>[
          IconButton(
            icon: Icon(Icons.menu),
            color: Colors.white,
            onPressed: () {},
          ),
          IconButton(
            icon: Icon(Icons.search),
            color: Colors.white,
            onPressed: () {},
          ),
        ],
    ),
    color: Colors.blueGrey,
    ),
      )
    ); ```

应用栏小部件有一个 shape 属性,您应该使用它来获得所需的结果,将您的代码更改为此

BottomAppBar(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.all(
        topLeft: Radius.circular(25),
        topRight: Radius.circular(25),
        bottomRight: Radius.circular(25),
        bottomLeft: Radius.circular(25),
      ),
    ),
   ... //Your codes
  ),

正如@Jagadish 建议的那样,我使用Shape: RoundedRectangleBorder RoundedRectangleBorder 来获得圆角的 BottomAppBar。 但是,为了获得缺口条,我使用了:

    shape: AutomaticNotchedShape(
RoundedRectangleBorder(
      borderRadius: BorderRadius.all(Radius.circular(25),
 ),
StadiumBorder(),
    ),
   ... //Codes=
  ),

这也为扩展浮动操作按钮和(我认为)具有差异形状的按钮提供了一个档次。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM