Flutter的图片组件

拉维

发布于 2019-08-12 16:00:53

4760

发布于 2019-08-12 16:00:53

加载远程图片

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文件，如下：

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

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 的结合来设置图片的圆角：

//利用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组件：

//利用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,
          ),
        ),
      ),
    );
  }
}

以上。

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2019-07-30，如有侵权请联系 cloudcommunity@tencent.com 删除

border