Flutter的图片组件

加载远程图片

代码语言：javascript复制

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: Image.network(
          "http://pic33.nipic.com/20131007/13639685_123501617185_2.jpg",

          //图片的对齐方式
          // alignment: Alignment.bottomLeft,

          //设置图片的背景颜色，通常和 colorBlendMode 配合一起 使用，这样可以是图片颜色和背景色混合。
          // color: Colors.red,
          // colorBlendMode: BlendMode.luminosity,
          
          /**
           * fit 属性用来控制图片的拉伸和挤压，这都是根据父容器来的。
           * BoxFit.fill:全图显示，图片会被拉伸，并充满父容器。
           * BoxFit.contain:全图显示，显示原比例，可能会有空隙。
           * BoxFit.cover:显示可能拉伸，可能裁切，充满(图片要 充满整个容器，还不变形)。
           * BoxFit.fitWidth:宽度充满(横向充满)，显示可能拉伸， 可能裁切。
           * BoxFit.fitHeight :高度充满(竖向充满),显示可能拉 伸，可能裁切。
           * BoxFit.scaleDown:效果和 contain 差不多，但是此属 性不允许显示超过源图片大小，可小不可大。
           */
          fit: BoxFit.scaleDown,
          
          /**
           * 平铺
           * ImageRepeat.repeat : 横向和纵向都进行重复，直到铺满整 个画布。
           * ImageRepeat.repeatX: 横向重复，纵向不重复。
           * ImageRepeat.repeatY: 纵向重复，横向不重复。
           */
          repeat: ImageRepeat.repeat,

        ),
        height: 300,
        width: 300,
        decoration: BoxDecoration(
          color: Colors.yellow
        ),
      ),
    );
  }
  
}

加载本地图片

加载本地图片分为两步：

在工程的根目录下新增images文件夹，然后在该文件夹下增加2.0x、3.0x、4.0x这三个文件夹。增加本地图片的时候，要分别在images文件夹、2.0x文件夹、3.0x文件夹、4.0x文件夹这四个文件夹下面分别倒入同一张图片所对应的不同分辨率大小的图片，我们的机器设备会根据屏幕的分辨率来确定取哪一个文件夹下的图片。如下图：

修改pubspec.yaml文件，如下：

然后在代码中使用就可以了：

代码语言：javascript复制

class HomeContent6 extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: ClipOval(
          child: Image.asset(
            "images/001.jpg",
            width: 300,
            height: 300,
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }
  
}

设置图片圆角

通过Container的 borderRadius 和 image 的结合来设置图片的圆角：

代码语言：javascript复制

//利用container特性设置图片圆角
class HomeContent1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 300,
        width: 300,
        decoration: BoxDecoration(
          color: Colors.yellow,
          // borderRadius: BorderRadius.all(
          //   Radius.circular(150),
          // ),
          borderRadius: BorderRadius.circular(150),
          image: DecorationImage(
            image: NetworkImage(
              'http://pic33.nipic.com/20131007/13639685_123501617185_2.jpg',
            ),
            fit: BoxFit.cover
          )
        ),
      ),
    );
  }
  
}

还有另外一种更简洁的设置图片圆角的方式，就是利用ClipOval组件：

代码语言：javascript复制

//利用ClipOval设置图片圆角
class HomeContent2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: ClipOval(
          child: Image.network(
            "http://pic33.nipic.com/20131007/13639685_123501617185_2.jpg",
            height: 300,
            width: 300,
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }
}

以上。

border image yaml

0 人点赞