Flutter 图片 Image 容器组件

Flutter 基础组件 Image 图片容器组件详情使用介绍

Flutter Image 组件介绍

引入图片的几种方式：

• Image.asset: 加载资源图片，就是加载项目资源目录中的图片,加入图片后会增大打包的包体体积，用的是相对路径。
• Image.network: 网络资源图片，意思就是你需要加入一段http://xxxx.xxx的这样的网络路径地址。
• Image.file: 加载本地图片，就是加载本地文件中的图片，这个是一个绝对路径，跟包体无关。
• Image.memory: 加载Uint8List资源图片,不怎么使用

常用的基础参数：

• fit :
  • BoxFit.fill: 全图显示，图片会被拉伸，并充满父容器。
  • BoxFit.contain: 全图显示，显示原比例，可能会有空隙。
  • BoxFit.cover：显示可能拉伸，可能裁切，充满（图片要充满整个容器，还不变形）。
  • BoxFit.fitWidth：宽度充满（横向充满），显示可能拉伸，可能裁切。
  • BoxFit.fitHeight ：高度充满（竖向充满）,显示可能拉伸，可能裁切。
  • BoxFit.scaleDown：效果和contain差不多，但是此属性不允许显示超过源图片大小，可小不可大
• repeat :
  • ImageRepeat.repeat : 横向和纵向都进行重复，直到铺满整个画布。
  • ImageRepeat.repeatX: 横向重复，纵向不重复。
  • ImageRepeat.repeatY：纵向重复，横向不重复。
• width: 一般结合 ClipOval 组件才能看到效果
• height: 一般结合 ClipOval 组件才能看到效果

1. 基础图片引入，代码案例演示：

// HomeCOntent 组件
class HomeCOntent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Container(
        child: Image.network(
          "https://b-ssl.duitang.com/uploads/item/201807/09/20180709235634_HEh8H.thumb.700_0.jpeg",
          alignment: Alignment.bottomRight,
          color: Colors.grey,
          colorBlendMode: BlendMode.screen, //颜色混合模式 一般和 color参数 一起使用
          // fit: BoxFit.cover // 图片的填充方式
        ),
        height: 400.0,
        width: 300.0,
        decoration: BoxDecoration(   // 装饰器
          color: Colors.orangeAccent,  // 深橘黄
          border: Border.all(
            color: Colors.tealAccent,  // 边框蓝绿色
            width: 2.0
          ),
          borderRadius: BorderRadius.all( Radius.circular(20) ), // 盒子圆角
          // borderRadius: BorderRadius.circular(150)
        ),
        padding: EdgeInsets.all(20),  // 盒子内边距
      )
    );
  }
}

2. 通过Container圆角，来实现圆角图片

// HomeCOntent 组件
class HomeCOntent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Container(
        height: 300.0,
        width: 300.0,
        decoration: BoxDecoration(   // 装饰器
          color: Colors.orangeAccent,  // 深橘黄
          border: Border.all(
            color: Colors.tealAccent,  // 边框蓝绿色
            width: 2.0
          ),
          borderRadius: BorderRadius.all( Radius.circular(150) ), // 盒子圆角
          // borderRadius: BorderRadius.circular(150)
          image: DecorationImage(
            // image: Image.network("http://xxx.xxx.xx.jpeg") // error
            image: NetworkImage("https://b-ssl.duitang.com/uploads/item/201812/08/2018120802719_cRRla.jpeg")
          )
        ),
        padding: EdgeInsets.all(20),  // 盒子内边距
      )
    );
  }
}

3. 使用ClipOval组件实现圆角图片

// HomeCOntent 组件
class HomeCOntent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Container(
        child: ClipOval(
          child: Image.network(
            "http://dingyue.nosdn.127.net/sIUFLqPmnMHp88DqM1WMfTHdTFRVsrNx96O007LN11kNY1534396611877compressflag.jpg",
            width: 300,
            height: 300,
            fit: BoxFit.cover
          )
        )
      )
    );
  }
}