Flutter：我怎样才能创建这个半出容器的圆形头像？答案

【问题标题】：Flutter : How can i create this circle avatar that's half out of the container?Flutter：我怎样才能创建这个半出容器的圆形头像？
【发布时间】：2020-03-09 06:43:39
【问题描述】：

如何创建我在 pinterest 中找到的这个设计

我只是想创建容器的一半用户圈我尝试了很多方法但失败了。谢谢。

【问题讨论】：

标签： flutter dart visual-studio-code

【解决方案1】：

要让那个半圆开箱即用，您需要在 Container 顶部添加一些填充，以便为您想要的内容腾出空间。这是一个示例代码。首先定义圆形容器的大小。这里我将它命名为“circleRadius”：

final double circleRadius = 120.0;

Container(
    height: double.infinity,
    width: double.infinity,
    color: Color(0xffE0E0E0),
    child: Stack(children: <Widget>[

      Padding(
        padding: const EdgeInsets.all(16.0),
        child: Stack(
          alignment: Alignment.topCenter,
          children: <Widget>[
            Padding(
              padding:
              EdgeInsets.only(top: circleRadius / 2.0, ),  ///here we create space for the circle avatar to get ut of the box
              child: Container(
                height: 300.0,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(15.0),
                  color: Colors.white,
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black26,
                      blurRadius: 8.0,
                      offset: Offset(0.0, 5.0),
                    ),
                  ],
                ),
                width: double.infinity,
                child: Padding(
                  padding: const EdgeInsets.only(top: 15.0, bottom: 15.0),
                      child: Column(
                        children: <Widget>[
                          SizedBox(height: circleRadius/2,),

                          Text('Maria Elliot', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 34.0),),
                          Text('Albany, NewYork', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16.0, color: Colors.lightBlueAccent),),

                          SizedBox(
                            height: 30.0,
                          ),
                          Padding(
                            padding: const EdgeInsets.symmetric(horizontal: 32.0),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: <Widget>[
                                Column(
                                  children: <Widget>[
                                    Text('Likes', style: TextStyle( fontSize: 20.0,  color: Colors.black54,),),
                                    Text('12K', style: TextStyle( fontSize: 34.0, color: Colors.black87, fontFamily: ''),),
                                  ],
                                ),
                                Column(
                                  children: <Widget>[
                                    Text('Wished', style: TextStyle( fontSize: 20.0,  color: Colors.black54),),
                                    Text('12K', style: TextStyle( fontSize: 34.0, color: Colors.black87, fontFamily: ''),),
                                  ],
                                ),
                                Column(
                                  children: <Widget>[
                                    Text('Purchased', style: TextStyle( fontSize: 20.0,  color: Colors.black54),),
                                    Text('12K', style: TextStyle( fontSize: 34.0, color: Colors.black87, fontFamily: ''),),
                                  ],
                                ),
                              ],
                            ),
                          )
                        ],
                      )
                ),
              ),
            ),



            ///Image Avatar
            Container(
              width: circleRadius,
              height: circleRadius,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.white,
                boxShadow: [
                  BoxShadow(
                    color: Colors.black26,
                    blurRadius: 8.0,
                    offset: Offset(0.0, 5.0),
                  ),
                ],
              ),
              child: Padding(
                padding: EdgeInsets.all(4.0),
                child: Center(
                  child: Container(
                    child: Icon(Icons.person), /// replace your image with the Icon
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    ]),
  ),

和输出：

【讨论】：

【解决方案2】：

您可以将ClipOval 与Image 一起用于圈子

然后使用Stack 小部件结合Positioned 小部件将其放入容器的一半

例子：

Stack(
    children: <Widget>[
      Container(
        width: 250,
        height: 250,
        color: Colors.red,
      ),
      Positioned(
       top:50 ,//change this as needed
       child:ClipOval(
         child: Image.network(
          'https://picsum.photos/250?image=9',
         ),
     ),
    ),
   ],
  ),

参考文献

【讨论】：