logo标签列表

Flutter：我怎样才能创建一个圆形头像，使其一半在容器外？

flutterdartvisual-studio-code
6
我该如何制作这个在Pinterest上发现的设计？我只想创建用户圆形，占据容器的一半。我尝试了很多方法但都失败了。谢谢。
2个回答
5
为了让那个半圆形出现在容器外面，你需要在容器上方添加一些填充来为你想要的内容腾出空间。这里是一个样例代码。首先定义圆形容器的大小，我将其命名为“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
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    ]),
  ),

并输出：

在这里输入图片描述

1

您可以使用带有Image的ClipOval来绘制圆形。

然后，使用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',
         ),
     ),
    ),
   ],
  ),

参考资料

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接