Image

再flutter里面的image组件有很多构造函数，今天只讲两个最常用的，分别是Image.asset， 本地图片（加载工程内的图片）和 Image.network 远程图片（加载网络图片），其余的今后用到再进行补充。

列表参数

image常用属性

Image.network练习

import 'package:flutter/cupertino.dart';

void main(List args) {
  runApp(ImgBox());
}

class ImgBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 400,
        height: 400,
        color: Color.fromRGBO(222, 222, 12, 1),
        child: Image.network(
          "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgss0.baidu.com%2F9fo3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2F83025aafa40f4bfbc1c101200d4f78f0f73618b4.jpg&refer=http%3A%2F%2Fgss0.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620696934&t=5e4fa02fb390a9e34ac30d56e923029d",
          alignment: Alignment.centerRight,
          fit: BoxFit.contain
        ),
      )
    );
  }
}

image.png

Image.asset练习

使用本地图片再flutter里面相等叫麻烦。
首先在根目录下创建一个image文件夹，文件夹名字不唯一；
其次在文件下面创建几个尺寸名称文件夹：1.0x，2.0x，3.0x......
接着将对应尺寸放进文件夹里面，注意图片名称要一致；
最后在pubspec.yaml文件进行配置。

image.png

image.png

我们来使用看看

import 'package:flutter/cupertino.dart';

void main(List args) {
  runApp(ImgBox());
}

class ImgBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 400,
        height: 400,
        color: Color.fromRGBO(222, 222, 12, 1),
        child: Image.asset(
          "image/2.0x/atm.jpg",
          alignment: Alignment.centerRight,
          fit: BoxFit.contain
        ),
      )
    );
  }
}

效果同上。

圆形图片

在实际操作中，我们会经常用到圆形的图片，来看看flutter有哪些方法可以设置圆形图片呢？
设置Container
既然我们把图片放在Container里面，那么自然可以将Container设置为圆形，从而达到实现图片的圆形效果。

import 'package:flutter/cupertino.dart';

void main(List args) {
  runApp(ImgBox());
}

class ImgBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 400,
        height: 400,
        decoration: BoxDecoration(
          color: Color.fromRGBO(222, 222, 12, 1),
          // borderRadius: BorderRadius.circular(200)
          borderRadius: BorderRadius.all(
            Radius.circular(200)
          ),
          image: DecorationImage(
            image: AssetImage("image/2.0x/atm.jpg"),
            fit: BoxFit.cover
          )
        ),
      )
    );
  }
}

注意经测试Container的color和decoration不能同时进行设置。

ClipOval

import 'package:flutter/cupertino.dart';

void main(List args) {
  runApp(ImgBox());
}

class ImgBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: ClipOval(
          child: Image.asset(
            "image/2.0x/atm.jpg",
            width: 200,
            height: 200,
            fit: BoxFit.cover,
            ),
        )
    )
    );
  }
}

image.png