2-7.基本组件【Image】

基本属性

  const Image({
    Key key,
    @required this.image, // 图片资源地址
    this.frameBuilder,    // 
    this.loadingBuilder,
    this.errorBuilder,
    this.semanticLabel,
    this.excludeFromSemantics = false,
    this.width,
    this.height,
    this.color,
    this.colorBlendMode,
    this.fit,
    this.alignment = Alignment.center,
    this.repeat = ImageRepeat.noRepeat,
    this.centerSlice,
    this.matchTextDirection = false,
    this.gaplessPlayback = false,
    this.filterQuality = FilterQuality.low,
  })

图片能网络请求或者项目中请求，但项目中请求需要配置pubspec.yaml信息，可以查阅 此链接

基本用法

Center(
    child: Container(
        // 容器的子组件是图片组件
        child: Image(
            // 图片组件image参数为本地图片
            image:  AssetImage("lib/image/img1.jpg"),
            width: 100.0,
        ),
        width: 300.0,               // 容器宽度
        height: 300.0,              // 容器的高度
        decoration: BoxDecoration(
            color: Colors.green[200],     // decoration中也有color,背景颜色
        ),
    )
)

alignment

Center(
    child: Container(
        // 容器的子组件是图片组件
        child: Image(
            // 图片组件image参数为本地图片
            image:  AssetImage("lib/image/img1.jpg"),
            width: 100.0,
              alignment: Alignment.bottomLeft,
        ),
        width: 300.0,               // 容器宽度
        height: 300.0,              // 容器的高度
        decoration: BoxDecoration(
            color: Colors.green[200],     // decoration中也有color,背景颜色
        ),
    )
)

fit

Center(
    child: Container(
        // 容器的子组件是图片组件
        child: Image(
            // 图片组件image参数为本地图片
            image:  AssetImage("lib/image/img1.jpg"),
            width: 100.0,
             fit: BoxFit.cover,
        ),
        width: 300.0,               // 容器宽度
        height: 300.0,              // 容器的高度
        decoration: BoxDecoration(
            color: Colors.green[200],     // decoration中也有color,背景颜色
        ),
    )
)

图片复制

Center(
    child: Container(
        // 容器的子组件是图片组件
        child: Image(
            // 图片组件image参数为本地图片
            image:  AssetImage("lib/image/img1.jpg"),
            width: 100.0,
           repeat: ImageRepeat.repeat        // 背景平铺
            // repeat: ImageRepeat.repeatY    // Y轴平铺
            // repeat: ImageRepeat.repeatY    // X轴平铺
            // repeat: ImageRepeat.noRepeat   // 不平铺
        ),
        width: 300.0,               // 容器宽度
        height: 300.0,              // 容器的高度
        decoration: BoxDecoration(
            color: Colors.green[200],     // decoration中也有color,背景颜色
        ),
    )
)