如何在卡片顶部（卡片的一半和卡片的一半）之外叠加圆形图像？

Question

我是新手，最近我尝试设计一个页面，其中必须将图像放在卡的顶部，其中一半放在卡上，一半放在卡外，我尝试了Stack但无法没有设计我想要的！ 这是我要设计的示例。

下面的代码无法提供理想的结果，如下图所示：

class ContainerWithCircle extends StatelessWidget {
final double circleRadius = 100.0;
final double circleBorderWidth = 8.0;
@override
Widget build(BuildContext context) {
   return Stack(
  alignment: Alignment.topCenter,
  children: <Widget>[

    Container(
      width: circleRadius,
      height: circleRadius,
      decoration:
          ShapeDecoration(shape: CircleBorder(), color: Colors.white),
      child: Padding(
        padding: EdgeInsets.all(circleBorderWidth),
        child: DecoratedBox(
          decoration: ShapeDecoration(
              shape: CircleBorder(),
              image: DecorationImage(
                  fit: BoxFit.cover,
                  image: NetworkImage(
                    'https://upload.wikimedia.org/wikipedia/commons/a/a0/Bill_Gates_2018.jpg',
                  ))),
        ),
      ),
    ),
    Padding(
      padding: EdgeInsets.only(top: circleRadius / 2.0),
      child: Container(
        // Some content
      ),
    ),
  ],
);

} }

Answer 1

要创建与您指定的布局相同的布局，您可以简单地使用堆栈并将卡的顶部放置填充。供您查找的资源：Stack，DecoratedBox和CircleBOrder.以下代码显示了示例实现：

class ContainerWithCircle extends StatelessWidget {
  final double circleRadius = 100.0;
  final double circleBorderWidth = 8.0;

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.topCenter,
      children: <Widget>[
        Padding(
          padding: EdgeInsets.only(top: circleRadius / 2.0),
          child: Container(
            //replace this Container with your Card
            color: Colors.white,
            height: 200.0,
          ),
        ),
        Container(
          width: circleRadius,
          height: circleRadius,
          decoration:
              ShapeDecoration(shape: CircleBorder(), color: Colors.white),
          child: Padding(
            padding: EdgeInsets.all(circleBorderWidth),
            child: DecoratedBox(
              decoration: ShapeDecoration(
                  shape: CircleBorder(),
                  image: DecorationImage(
                      fit: BoxFit.cover,
                      image: NetworkImage(
                        'https://upload.wikimedia.org/wikipedia/commons/a/a0/Bill_Gates_2018.jpg',
                      ))),
            ),
          ),
        )
      ],
    );
  }
}