Flutter入门之Image控件的使用（二）

1.本地图片资源的使用（Image.asset()）

（1）新建一个images文件夹存放本地图片资源。

（2）得在pubspec.yaml 文件中声明一下。

修改：这里以我的images文件夹中的图片为例，随后点击Packages get。

实现小例子：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Image.asset('images/owl.jpg'),
    );
  }
}

运行结果

2.加载网络图片（Image.network()）

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Image.network(
        'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg',
        fit: BoxFit.fitWidth, //缩放模式->BoxFit.fitWidth:图片填满宽度，高度可能会被截断
      ),
    );
  }
}

运行结果：

添加scale属性后:

缩放后的运行结果：

Image详情 请访问https://api.flutter.dev/flutter/widgets/Image-class.html

请帮顶 / 评论点赞！你们的鼓励是我写作的最大动力！