Question

我想创建一个圆底的appbar，如下所示：

我如何实施这样的appbar？我已经尝试阅读CustomPainter的文档，但我觉得这不是一种方法。

Answer 1

您可以使用BoxDecoration将边框半径和阴影添加到Container / DecoratedBox。

 new Container(
    height: 200.0,
    decoration: new BoxDecoration(
      color: Colors.orange,
      boxShadow: [
        new BoxShadow(blurRadius: 40.0)
      ],
      borderRadius: new BorderRadius.vertical(
          bottom: new Radius.elliptical(
              MediaQuery.of(context).size.width, 100.0)),
    ),
  ),

虽然您可能会注意到：这不是完美的像素。边框不是实际的圆圈，而是省略号。这可能是不受欢迎的。

更现实但更复杂的方法是根据屏幕宽度绘制一个半径为圆的圆。哪个会溢出容器。然后剪辑它。

你需要一些东西：LayoutBuilder来获得宽度。 ClipRect不要在容器的约束之外绘制。并OverflowBox，布置一个比它的父级更大的圆圈。

class RoundedAppBar extends StatelessWidget implements PreferredSizeWidget {
  @override
  Widget build(BuildContext context) {
    return new SizedBox.fromSize(
      size: preferredSize,
      child: new LayoutBuilder(builder: (context, constraint) {
        final width = constraint.maxWidth * 8;
        return new ClipRect(
          child: new OverflowBox(
            maxHeight: double.infinity,
            maxWidth: double.infinity,
            child: new SizedBox(
              width: width,
              height: width,
              child: new Padding(
                padding: new EdgeInsets.only(
                  bottom: width / 2 - preferredSize.height / 2),                    
                child: new DecoratedBox(
                  decoration: new BoxDecoration(
                    color: Colors.orange,
                    shape: BoxShape.circle,
                    boxShadow: [
                      new BoxShadow(color: Colors.black54, blurRadius: 10.0)
                    ],
                  ),
                ),
              ),
            ),
          ),
        );
      }),
    );
  }

  @override
  Size get preferredSize => const Size.fromHeight(200.0);
}

有目的地居中，只是为了展示剪辑如何运作

Answer 2

您的上方帮助了我很多，我只是在努力解决一件事，那就是使圆棒的高度减小了很多。

我在此行中更改高度

 Size get preferredSize => const Size.fromHeight(200.0);

但是它的影响还不够，我什至将其设置为0，但仍然偏高。

Answer 3

在Flutter中，您可以在带有形状属性的AppBar小部件中具有自定义形状，但是SliverAppBar小部件中缺少此属性

  AppBar(
    title: Text('Hello'),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.vertical(
        bottom: Radius.circular(30),
      ),
    ),
  ),

Answer 4

有一种使用ClipPath实现此目的的简单方法-

将背景色应用于AppBar
在主体中的AppBar下方创建一个高度（例如240）的SizedBox /容器，并应用相同的背景色

使用ClipPath小部件包装该SizedBox /容器

   ClipPath(
   clipper: CustomShape(), // this is my own class which extendsCustomClipper
   child: Container(
   height: 150,
   color: kPrimaryColor,
   ),
 ),

现在创建一个类似CustomShape的类，该类将如下所示扩展CustomClipper

class CustomShape extends CustomClipper<Path> {
  @override
  getClip(Size size) {
    double height = size.height;
    double width = size.width;
    var path = Path();
    path.lineTo(0, height - 50);
    path.quadraticBezierTo(width / 2, height, width, height - 50);
    path.lineTo(width, 0);
    path.close();
    
    return path;
 }

  @override
    bool shouldReclip(CustomClipper oldClipper) {
    return true;
 }
}

更改您的身高比例，我将身高保持在50以得到想要的优美曲线

输出如下-

Answer 5

您可以通过以下方式获得确切的输出：

AppBar(
    toolbarHeight:MediaQuery.of(context).size.height/4,
    leading: Container(),
    shape: RoundedRectangleBorder(
      borderRadius: new BorderRadius.vertical(
        bottom: new Radius.elliptical(SizeConfig.screenWidth, 56.0),
      ),
    ),
  ),

appbar上的圆形底部

5 个答案: