Flutter - 3种方式实现圆形背景，圆形头像

谁借莪１个温暖的怀抱￠ 2021-09-13 15:34 1056阅读 0赞

一、Flutter 里面实现实现圆形剪切有3种方法：

*  Container decoration 装饰器里设置圆形+圆角
 *  ClipOval
 *  CircleAvatar

ClipOval 只能剪切图片，CircleAvatar 和 Container 能适配复杂视图,比如这样：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hzal9ibG9n_size_16_color_FFFFFF_t_70]  
**第一种方法 Container：**

class EE extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Container(
          width: 350,
          height: 350,
          alignment: Alignment.center,
          decoration: BoxDecoration(
              image: DecorationImage(image: AssetImage(
                  "assets/icons/icon_3.png"),
                fit: BoxFit.cover
              ),
              borderRadius: BorderRadius.circular(1000)),
          child: Text(
            "AAAAAAAAAA",
            style: TextStyle(
              fontSize: 30,
              color: Colors.lightGreenAccent,
            ),
          ),
        );
      }
    }

**第二种方式 CircleAvatar：**

class FF extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return CircleAvatar(
          backgroundImage: AssetImage(
            "assets/icons/icon_3.png",
          ),
          maxRadius: 200,
          child: Text(
            "AAAAAAAAAA",
            style: TextStyle(
              fontSize: 30,
              color: Colors.lightGreenAccent,
            ),
          ),
        );
      }
    }

**第三种方式 ClipOval:**

class DD extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ClipOval(
              child: Container(
                child: Image(
                  image: AssetImage("assets/icons/icon_2.jpg"),
                  height: 300,
                  width: 300,
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ],
        );
      }
    }

转自：https://juejin.im/post/5d6d1c33f265da03d60f1a93

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hzal9ibG9n_size_16_color_FFFFFF_t_70]: /images/20210913/7db1bc90059046a984dc1fba2364c406.png