Flutter布局-图片组件

名称	功能
alignment	topCenter:顶部居中对齐 topLeft:顶部左对齐 topRight:顶部右对齐 center:水平垂直居中对齐 centerLeft:垂直居中左对齐 centerRight:垂直居中右对齐 bottomCenter:底部居中对齐 bottomLeft:底部居左对齐 bottomRight:底部居右对齐
color和colorBlendMode	设置图片背景颜色通常和colorBlendMode配合使用，这样可以是图片颜色和背景颜色混合。
fit	fit属性用来控制图片的拉伸和挤压，这都是根据父容器来的。 BoxFit.fill:全图显示，图片会被拉伸，并充满父容器。 BoxFit.contain:全图显示，显示原比例，可能会有间隙 BoxFit.cover:显示可能拉伸，可能裁剪，充满（图片要从满整个容器，还不变形。） BoxFit.fitWidth:宽度充满,显示可能拉伸，可能裁剪 BoxFit.fitHeight:高度充满,显示可能拉伸，可能裁剪 BoxFit.scaleDown:效果和contain差不多，但是此属性不允许显示超过源图片大小，可小不可大。
repeat	平铺 ImageRepeat.repeat:横向纵向都进行重复铺满整个画布 ImageRepeat.repeatX:横向进行铺满整个画布
width	宽度一般结合ClipOval才能看到效果
height	高度一般结合ClipOval才能看到效果

远程图片 Image.network

dart

child: Image.network(
        "https://avatars1.githubusercontent.com/u/27486511?s=460&v=4",
        fit: BoxFit.cover,
        alignment: Alignment.bottomRight,
      ),

圆角图片实现方式1

dart

child: Container(
        width: 400.0,
        height: 400.0,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(200),
          image: DecorationImage(
              image: NetworkImage(
                'https://avatars1.githubusercontent.com/u/27486511?s=460&v=4',
              ),
              fit: BoxFit.cover),
        ),
      ),

圆角图片的实现方式2

dart

child: ClipOval(
          child: Image.network(
            "https://avatars1.githubusercontent.com/u/27486511?s=460&v=4",
            width: 150.0,
            height: 150.0,
          ),
        ),

本地图片 Image.asset

再项目根目录新建img文件夹放入图片

修改pubspec.yam中的，将文件夹中的图片配置进去，然后才可以再项目中使用

dart

assets:
  - images/a_dot_burr.jpeg
  - images/a_dot_ham.jpeg

# 或者直接配置图片文件夹也可以
 assets:
   - images/

dart

1
2
3

Container(
        child: Image.asset('images/1.jpg'),
      ),