Question

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

ui design by inspiredesign.me

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

Answer 1

要让该半个圆圈开箱即用，您需要在“容器”顶部添加一些填充以为所需空间腾出空间。这是示例代码。首先定义圆形容器的尺寸。在这里，我将其命名为“ 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
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    ]),
  ),

和输出：

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

参考

Flutter：我该如何创建容器外一半的圆形头像？

2 个答案: