flutter 如何实现圆角图片

第一种方式 使用Container来实现圆角

这种方式其实是投机取巧,我们吧 Container 设置有圆角,那么,他里面的内容就会被"裁剪",所以变成圆角了.

import 'package:flutter/material.dart';
void main()=>runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("使用Container来实现圆角"),
          ),
          body:HomeContent()
      ),
    );
  }
}

class HomeContent extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return Center(
        child:Container(
          width: 300.0,
          height: 300.0,
          decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.circular(150),
            image: DecorationImage(
                image: NetworkImage("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590840208116&di=b5f2d909da77d39435bff725494f4271&imgtype=0&src=http%3A%2F%2Fwx4.sinaimg.cn%2Flarge%2F007487hRgy1fxnikznh5wj31150kun05.jpg"),
                fit: BoxFit.cover
            ),
          ),
        )
    );
  }
}

第二种,使用 ClipOval 来实现圆角

import 'package:flutter/material.dart';
void main()=>runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("使用ClipOval 实现圆角"),
          ),
          body:HomeContent()
      ),
    );
  }
}

class HomeContent extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return Center(
        child:Container(
          child: ClipOval(
            child: Image.network(
              "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590840208116&di=b5f2d909da77d39435bff725494f4271&imgtype=0&src=http%3A%2F%2Fwx4.sinaimg.cn%2Flarge%2F007487hRgy1fxnikznh5wj31150kun05.jpg",
              width: 300,
              height: 300,
              fit: BoxFit.cover,
            ),
          ),
        )
    );
  }
}

最简单的方式:使用CircleAvatar 实现圆角头像

使用 CircleAvatar 的 backgroundImage 属性,可以设置图片地址,他出来就是圆角了

@override
  Widget build(BuildContext context) {
    return Container(
        width: 300,
        height: 300,
        child: CircleAvatar(
      backgroundImage: NetworkImage(
          'https://img.tupianzj.com/uploads/allimg/201909/9999/38e9633588.jpg'),
    ));
  }