flutter - 如何在卡片顶部叠加圆形图像(一半在卡片内，一半在卡片外)？

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',
                      ))),
            ),
          ),
        )
      ],
    );
  }
}