如何在flutter中的容器中创建缺口

Question

我已经浏览了几篇文章，但找不到如何在我附加的图像中重新创建这个水平滚动列表。如何在故事容器中重新创建中心凹口，并将圆形头像停靠在其中？

我尝试过 flutter 定制剪刀，但我认为这不合适。还有我如何定位圆形头像。我可以使用 Stack 小部件，但我想知道是否有更好的方法。

Answer 1

好的，可以使用

ClipPath

自定义此视图，我已经在

Stack

中设置了小部件。 但请注意，堆栈顶部有可用空间，以允许圆形容器适合凹口（显示在凹口上方）。

介绍如下：

Container(
            width: double.infinity,
            color: Colors.grey,
            height: 300,
            child: Stack(
              alignment: Alignment.bottomCenter,
              children: [
                ClipPath(
                  clipper: MyClipper(),
                  child: Container(
                    color: Colors.black,
                    width: double.infinity,
                    height: 200,
                  ),
                ),
                Positioned(
                  top: 70,
                  child: Container(
                    width: 40,
                    height: 40,
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color: Colors.white,
                    ),
                  ),
                )
              ],
            ),
          ),

和剪刀：

import 'package:flutter/cupertino.dart';

class MyClipper extends CustomClipper<Path>{
  @override
  getClip(Size size) {

    Path path = Path();
    double w = size.width;
    double h = size.height;
    path.lineTo((w/2)-30 , 0);

    path.quadraticBezierTo( (w/2),40 , (w/2) +30, 0 );

    path.lineTo(w, 0);

    path.lineTo(w, h);
    path.lineTo(0, h);

    return path;

  }

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

}

上面的clipper类只从容器的顶部中心切出凹口

结果

了解更多详细信息：尝试搜索

ClipPath

以及如何剪辑形状。

希望对你有帮助。