[flutter-16] 圆角图像实现(CircleAvatar + ClipOval + (Container+BoxDecoration))

1. 圆形头像实现⭕️

• 3种方式：
  • 1.CircleAvatar
    • CircleAvatar可以实现圆角头像，也可以添加一个子Widget， 比如头像上加文字之类的
  • 2.ClipOval
    • 只有头像时使用，不能添加文字之类的
  • 3.Container+BoxDecoration
    • Container实现

1.1 CircleAvatar

• CircleAvatar可以实现圆角头像，也可以添加一个子Widget
• backgroundImage要求我们传入一个ImageProvider, 这里我们使用的是NetworkImage
• 这里我还在里面添加了一个文字，但是我在文字外层包裹了一个Container: 这里Container的作用是为了可以控制文字在其中的位置调整.

const CircleAvatar({
  Key key,
  this.child, // 子Widget
  this.backgroundColor, // 背景颜色
  this.backgroundImage, // 背景图像
  this.foregroundColor, // 前景颜色
  this.radius, // 半径
  this.minRadius, // 最小半径
  this.maxRadius, // 最大半径
})

class CircleWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: CircleAvatar(
        radius: 100, // 半径
        backgroundImage: NetworkImage(// 背景图像(传入一个NetworkImage)
            'https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg'),
        child: Container(
          // 这里Container的作用是为了可以控制文字在其中的位置调整,但是文字的限定没有做限制；
          padding: EdgeInsets.all(0), // 这个设置的是text的位置，不是Container位置
          alignment: Alignment(0, .6),
          width: 200, // 设置半径的2倍宽度
          height: 200, // 设置半径的2倍高度
          // color: Colors.blueAccent,
          child: Text(
            'CircleAvatar',
            style: TextStyle(
              fontSize: 20,
              color: Colors.orange,
              fontWeight: FontWeight.bold,
            ),
          ),
        ), //
      ),
    );
  }
}

1.2. ClipOval

• ClipOval也可以实现圆角头像，而且通常是在只有头像时使用

// ClipOval也可以实现圆角头像，而且通常是在只有头像时使用
class ClipOvalWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ClipOval(
        child: Image.network(
          'https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg',
          width: 200,
          height: 200,
        ),
      ),
    );
  }
}

1.3. Container+BoxDecoration

class ContainerCircleDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        // color: Colors.red, // 如果设置decoration，设置背景色就需要在decoration.color 设置
        width: 200,
        height: 200,
        decoration: BoxDecoration(
          color: Colors.red,
          borderRadius: BorderRadius.circular(20),
          image: DecorationImage(
            image: NetworkImage(
                "https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg"),
          ),
        ),
      ),
    );
  }
}

2. 实现 圆角 图片

• 2种方式
  • 1:ClipRRect
    • ClipRRect用于实现圆角效果，可以设置圆角的大小。
  • 2:Container+BoxDecoration
    • Container补充

2.1: ClipRRect

class ClipRRectWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ClipRRect(
        borderRadius: BorderRadius.circular(30), // 设置圆角大小 30
        child: Image.network(
          'https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg',
          width: 200,
          height: 200,
        ),
      ),
    );
  }
}

2.2: Container+BoxDecoration

class ContainerCircleDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        // color: Colors.red, // 如果设置decoration，设置背景色就需要在decoration.color 设置
        width: 200,
        height: 200,
        decoration: BoxDecoration(
          color: Colors.red,
          borderRadius: BorderRadius.circular(20),
          image: DecorationImage(
            image: NetworkImage(
                "https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg"),
          ),
        ),
      ),
    );
  }
}