学习Flutter之Image控件

属性：

alignment  图片的对齐方式

color / colorBlenMode  //设置图片的背景颜色，通常和colorBlenMode 配合一起使用，这样可以是图片和背景色混合。

fit    BoxFit.fill:全图显示，图片会被拉升，并充满父容器

       BoxFit.contain:全图显示，显示原比例，可能会有空隙

       BoxFit.cover:显示可能拉升，可能裁剪，充满（图片要充满整个控件，还不变形）

repeat   平铺

        ImageRepeat.repeat:横向和纵向都进行重复，直到铺满整个画布

        ImageRepeat.repeatX:横向重复，纵向不重复

        ImageRepeat.repeatY:纵向重复，横向不重复

更多属性见官方文档

https://api.flutter.dev/flutter/widgets/Image-class.html

实现圆形图片：

第一种方式：

     

class NewDemosPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _NewDemoState();
  }
}

class _NewDemoState extends State<NewDemosPage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        alignment: Alignment.centerLeft,
        height: 300.0,
        width: 300.0,
        decoration: BoxDecoration(//利用Container 的decoration 来实现
            color: Colors.red,
            borderRadius: BorderRadius.circular(150),
            image: DecorationImage(
                image: NetworkImage("图片地址"), fit: BoxFit.cover)),
      ),
    );
  }
}

 

第二种方法:使用ClipOval

class NewDemoPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _NewDemoState();
  }
}

class _NewDemoState extends State<NewDemoPage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ClipOval(//这种简单
        child: Image.network(
          "图片地址",
          width: 150,
          height: 150,
        ),
      ),
    );
  }
}

引入图片：

1在根目录新建对应文件夹 images(名字自己定)，可以在images里面定义2.0x, 3.0x,4.0x 放入不同尺寸的图片

2.找到pubspec.yaml  在里面配置images: 对应图片路径