Flutter学习基础组件之Image

Image：显示图片所用，相当于UIImage，通常和Container一起使用来实现圆角，圆形图片等效果，也可单独使用

加载网络图片

单独使用：

class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Image.network('https://******.jpg',
                width:200,height: 200,
),//这里设置大小会改变图片大小，但不会改变图片比例
    );
  }
}

结合Container使用来实现圆形图片，方式一：

class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Container(
        child: ClipOval(
          child: Image.network('https://******.jpg',
          width: 100,height: 100,fit: BoxFit.cover,),
        ),
      ),
    );
  }
}

结合Container使用来实现圆形图片，方式二：

class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Container(
        height: 150,
        width: 150,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(25),//这里的值是改变圆角大小的，当这里设置的值是width和height一半时就是圆形图片
          image: DecorationImage(
            image: NetworkImage('https://******.jpg'),
            fit: BoxFit.cover
          )
        ),
      ),
    );
  }
}

加载本地图片首先得在根目录下创建文件夹assets、assets/2.0x、assets/3.0x，分别存放不同分辨率的图片（命名要相同）

创建文件夹.png

修改pubspec.yaml，声明图片

修改yaml.png