Flutter overflow 圆形头像覆盖一个容器

Question

这是我要构建的设计：

这是我现在所在的位置：

当我尝试用溢出框包裹 CircleAvatar 的 Sized Box 时，出现“A RenderFlex 溢出底部的 Infinity 像素”错误。我尝试使用堆栈，但意识到它使事情变得更加复杂。我觉得 溢出框 是答案，但我无法理解它。

Container(
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [
      SizedBox(
        child: CircleAvatar(
          radius: 40.0,
          backgroundColor: Colors.white,
          child: CircleAvatar(
            child: Align(
              alignment: Alignment.bottomRight,
              child: CircleAvatar(
                backgroundColor: Colors.white,
                radius: 12.0,
                child: Icon(
                  Icons.camera_alt,
                  size: 15.0,
                  color: Color(0xFF404040),
                ),
              ),
            ),
            radius: 38.0,
            backgroundImage: AssetImage(
              'assets/images/user-image-default.png'),
          ),
        ),
      ),
      Center(
        child: Container(
          padding: EdgeInsets.only(top: 16.0),
          child: Text(
            'Hi Sir David',
            style: TextStyle(
              fontFamily: 'SF Pro',
              fontWeight: FontWeight.w700,
              fontSize: 24.0,
            ),
          ),
        ),
      ),
      Center(
        child: Container(
          padding: EdgeInsets.only(top: 8.0),
          child: Text(
            'Wildlife Advocate',
            style: TextStyle(
              fontFamily: 'SF Pro',
              fontSize: 12.0,
            ),
          ),
        ),
      ),
      Center(
        child: Padding(
          padding: const EdgeInsets.all(24.0),
            child: TextButton(
              onPressed: () {
                print('im pressed');
              },
              child: Container(
                padding:
                EdgeInsets.fromLTRB(16.0, 8.0, 16.0, 8.0),
                decoration: BoxDecoration(
                  color: Color(0xFFEF476F),
                  borderRadius:
                  BorderRadius.all(Radius.circular(20.0)),
                ),
                child: Text(
                  'Edit Profile',
                  style: TextStyle(
                    fontFamily: 'SF Pro',
                    color: Colors.white,
                    fontWeight: FontWeight.w500,
                    fontSize: 16.0,
                  ),
                ),
              ),
            ),
        ),
      ),
    ],
  ),
  margin: EdgeInsets.all(16.0),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(16.0),
  ),
),

Answer 1

我没有提供您示例的完整代码，但这可能对您有所帮助。我只是编写了这个飞镖板，希望它能提供解决方案 ...

Stack(
  children: [
    
    Container(
      margin: EdgeInsets.only(top: 48),
    height: 300,decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(16.0),
),),
    Align(
      alignment: Alignment.topCenter,
    child: SizedBox(
    child: CircleAvatar(
      radius: 40.0,
      backgroundColor: Colors.white,
      child: CircleAvatar(
        child: Align(
          alignment: Alignment.bottomRight,
          child: CircleAvatar(
            backgroundColor: Colors.white,
            radius: 12.0,
            child: Icon(
              Icons.camera_alt,
              size: 15.0,
              color: Color(0xFF404040),
            ),
          ),
        ),
        radius: 38.0,
        backgroundImage: AssetImage(
          'assets/images/user-image-default.png'),
      ),
    ),)
  ),
  ]
)

Answer 2

我知道您想要两个元素相互重叠。在这种情况下，Stack 小部件可能会有所帮助。 Stack 接受要堆叠的 children 数组。基本上，您要堆叠的 2 个组件是 CircleAvatar 和下面的卡片 Container。此外，由于默认情况下小部件在 top-left 上对齐，您可能希望将其对齐在 top-center 上。您可以使用 alignment 属性并将其设置为 Alignment.topCenter 以相应地对齐它。

代码结构

把它们放在一起，你得到这个结构：

Container(
  margin: EdgeInsets.all(16.0),
  child: Stack(
    alignment: Alignment.topCenter,
    children: [
      // Avatar

      SizedBox(
        child: CircleAvatar(
          ...
        )
      ),

      // Card Container

      Container(
        child: Column(
          children: [
            // All the widgets after `CircleAvatar` goes here
            ⋮
            ⋮
          ]
        ),
        margin: EdgeInsets.only(top: 16.0),    // Change this based on the spacing between the card container and the avatar
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(16.0),
        ),
      )
    )
  )
);

注：

根据所有对齐方式，您可以更改上边距的值。所提供的应仅被视为占位符。
此答案仅提供代码结构，使其看起来简洁易懂。

Answer 3

如果这些方法不起作用，您应该做的是用“定位”小部件包装两个小部件（即您想要堆叠在一起的小部件）以了解更多信息点击 link以下：

https://www.youtube.com/watch?v=7njbf2mFcgM

Answer 4

Align(
alignment: Alignment.TopCenter,
 child: CircleAvatar(
   radius: 70,
   backgroundImage: AssetImage('assets/images/avatart.jpg'),
   backgroundColor: kPrimaryColor,
 ),
),

Flutter overflow 圆形头像覆盖一个容器

Flutter overflow circle avatar overlaying a container

overlay

flutter

代码结构