Flutter——Image组件

吃可爱长大的小学妹 提交于 2019-12-06 13:54:22

Image组件有很多构造函数,这里只说两个。

  • Image.asset  本地图片

1.在根目录新建文件夹 /images

2.在 images 文件夹下建立两个文件夹 /images/2.0x  /images/3.0x

3.在 /image 下放最小的图片,依次放较大的图片在 2.0x,3.0x

4.在pubspec.yaml声明添加的图片文件

flutter:
  assets:
    - images/123.ipeg
    - images/2.0x/123.jpeg
    - images/3.0x/123.jpeg

5.在代码中就可以使用了

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "imageWidget",
      home: Scaffold(
        body: Container(
          child: Image.asset("images/123.jpeg")
        ),
      ),
    );
  }
}

 

  • Image.network  远程图片

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "imageWidget",
      home: Scaffold(
        body: Container(
          child: Image.network("https://pics4.baidu.com/feed/1ad5ad6eddc451dabefc4f0ffc208b63d116322a.jpeg?token=a3becc48305b35b82b59db0e88d5cdc5&s=15F057864E5469D2CA11C17E03001013")
        ),
      ),
    );
  }
}

 

  • Image组件的常用属性

名称 类型 说明
alignment
Alignment 
图片的对齐方式
color 和 colorBlendMode
 
设置图片的背景颜色,通常和 colorBlendMode 配合一起使用,这样可以是图片颜色和背景色混合。上面的图片就是进行了颜色的混合,绿色背景和图片红色的混合
fit
BoxFit
fit 属性用来控制图片的拉伸和挤压,这都是根据父容器来
的。
BoxFit.fill:全图显示,图片会被拉伸,并充满父容器。
BoxFit.contain:全图显示,显示原比例,可能会有空隙。
BoxFit.cover:显示可能拉伸,可能裁切,充满(图片要充满整个容器,还不变形)。
BoxFit.fitWidth:宽度充满(横向充满),显示可能拉伸,可能裁切。
BoxFit.fitHeight :高度充满(竖向充满),显示可能拉伸,可能裁切。
BoxFit.scaleDown:效果和 contain 差不多,但是此属性不允许显示超过源图片大小,可小不可大。
repeat
 
ImageRepeat.repeat : 横向和纵向都进行重复,直到铺满整个画布。
ImageRepeat.repeatX: 横向重复,纵向不重复。
ImageRepeat.repeatY:纵向重复,横向不重复。
width
 
宽度  一般结合 ClipOval 才能看到效果(ClipOval 直接自适应成圆形或椭圆型图片)
height
 
高度  一般结合 ClipOval 才能看到效果(ClipOval 直接自适应成圆形或椭圆型图片)

 

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!