如何在卡片顶部叠加圆形图像（一半在卡片中，一半在卡片外）？

Question

我是 flutter 新手，最近我尝试设计一个页面，我必须将图像放在卡片的顶部，一半在卡片上，一半在卡片外，我尝试了 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',
                      ))),
            ),
          ),
        )
      ],
    );
  }
}