圆底

Question

我想做一个底部圆圆的蓝宝石，如下所示：

​

​

我将如何实现这样一个应用程序呢？我已经试着阅读了CustomPainter的文档，但我不认为这是一条路。

Answer 1

在颤振中，您可以在带有shape属性的AppBar小部件中拥有自定义形状。

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

Answer 2

您可以使用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 3

有一种简单的方法可以使用ClipPath实现这一点-

1. 将背景色应用于AppBar
2. 在身体AppBar下方创建一个一定高度(例如240)的SizedBox/容器，并应用相同的背景色
3. 使用ClipPath小部件包装该SizedBox/容器 ClipPath(裁剪器: CustomShape()，//这是我自己的类，extendsCustomClipper子类:容器(高度: 150，颜色: 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作为你想要的曲线。

输出如下-

​

​