美文网首页
(Flutter 三)Image:图片

(Flutter 三)Image:图片

作者: 小豆豆苗 | 来源:发表于2020-03-17 19:20 被阅读0次

Flutter应用程序可以包含代码和 assets(有时称为资源)。asset是打包到程序安装包中的,可在运行时访问。常见类型的asset包括静态数据(例如JSON文件),配置文件,图标和图片(JPEG,WebP,GIF,动画WebP / GIF,PNG,BMP和WBMP)。
Image中的属性列表如下:

Image.network(
    String src, {
    Key key,
    double scale = 1.0,
    this.frameBuilder,
    this.loadingBuilder,
    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,
    Map<String, String> headers,
    int cacheWidth,
    int cacheHeight,
  })

一、显示网络图片示例

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text('Welcome to Flutter'),
          ),
          body: Center(
            child: Container(
              //https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584443655108&di=25db4ce2d0c8fb0529f51df09c327bea&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F14%2F75%2F01300000164186121366756803686.jpg
              child: Image.network('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584443655108&di=25db4ce2d0c8fb0529f51df09c327bea&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F14%2F75%2F01300000164186121366756803686.jpg',
                color: Colors.greenAccent,
                colorBlendMode: BlendMode.darken, //图片混合模式,类似于在图片上加一层颜色
                fit: BoxFit.scaleDown,//填充图片到容器
                /* contain:根据原图到比例填充容器,图片不会变形,有可能不会填充满整个容器
                   fill:填充满整个容器,有可能会变形
                   fitWidth:图片不变形的情况下填满整个容器的宽度,如果图片高度比容器高会被截掉部分
                   fitHeight:高度填充满,如果宽度不够则不会填充满整个容器
                   cover:它会填充满整个容器,图片不会变形,但是可能会被裁剪
                   scaleDown: 按比例显示图片,有可能不会填充满整个容器
                * */
                repeat: ImageRepeat.repeat, //是否重复拷贝图片把容器填充满
                /*
                repeat:重复填充,以中间为基础,横向纵向都填充
                repeatX:只横向填充
                repeatY:只纵向填充
                noRepeat:不重复填充
                * */
              ),
              width: 300,
              height: 200,
              color: Colors.lightBlue,
            ),
          ),
        )
    );
  }
}

运行结果如下:


image.png

二、本地资源图片示例

1、先创建一个资源文件夹,命名为images,自己可以命名为任意名称都可以。把本地图片拖到文件夹里。也可以在工程目录中


2、在pubspec.yaml文件夹中添加资源路径,注意,记得缩进。
这个assets是固定写法,它需要比‘flutter:’缩进一格。然后换行写上图片的路径。


3、编写代码

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'this is a image',
      home: Scaffold(
        appBar: AppBar(title: Text('this is a image')),
        body: Center(
            child: Image.asset('images/test.jpeg')
        ),
      ),
    );
  }
}

4、运行结果如下:


image.png

相关文章

网友评论

      本文标题:(Flutter 三)Image:图片

      本文链接:https://www.haomeiwen.com/subject/mkjtyhtx.html