Flutter图片组件

src=http___b-ssl.duitang.com_uploads_item_201808_06_20180806140035_nnbed.thumb.700_0.png&refer=http___b-ssl.duitang.jpeg

1.Flutter图片组件

图片组件是显示图像的组件，Image 组件有很多构造函数，主要用到的两个：

• Image.asset 本地图片
• Image.network 远程图片

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 才能看到效果
height		高度 一般结合 ClipOval 才能看到效果

更多属性参考：https://api.flutter.dev/flutter/widgets/Image-class.html

2.Flutter实现圆角以及实现圆形图片

第一种方式：

class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        // child: Image.network("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F06%2F20180806140035_nnbed.thumb.700_0.png&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616430520&t=b40681968ba087b3533e17b9aa036450",
        //   alignment: Alignment.bottomCenter,
        //   color: Colors.blue,
        //   colorBlendMode: BlendMode.screen,
        //   fit: BoxFit.cover,
        //   repeat: ImageRepeat.repeat,
        // ),
        width: 300,
        height: 300,
        decoration: BoxDecoration(
          color: Colors.amberAccent,
          borderRadius: BorderRadius.circular(300),
          image: DecorationImage(
            image: NetworkImage("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F06%2F20180806140035_nnbed.thumb.700_0.png&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616430520&t=b40681968ba087b3533e17b9aa036450"),
            fit: BoxFit.cover
          )
        ),
      ),
    );
  }
}

第二种方式(ClipOva)：

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: ClipOval(
        child: Image.network("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F06%2F20180806140035_nnbed.thumb.700_0.png&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616430520&t=b40681968ba087b3533e17b9aa036450",
          width: 400,
          height: 400,
          fit: BoxFit.cover,
        ),
      ),
    );
  }

3.Flutter引入本地文件

1.步骤

1. 在flutter中引入本地图片, 我们先在项目根目录建立一个images文件夹, 把本地图片资源拖进去
2. 在pubspec.yaml中配置, 特别注意, 一定要注意缩进, 否则无法读取图片路径

flutter:
  uses-material-design: true
  assets:
    - images/myIcon.png
    - images/myIcon2.png
12345

1. 在页面中使用

Image.asset('images/myIcon.png')

如果有100张本地图片我们要配置100遍吗? 当然不是, 我们可以引入相对路径, 如下

flutter:
  uses-material-design: true
  assets:
    - images/
1234

2.使用方法不变

Image.asset('images/myIcon.png')
Image.asset('images/myIcon2.png')

整体练习代码

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('FlutterDemo2'),
          backgroundColor: Colors.teal,
        ),
        body: HomeContent(),
      ),
    );
  }
}

// class HomeContent extends StatelessWidget{
//   @override
//   Widget build(BuildContext context) {
//     return Center(
//       child: Container(
//         // child: Image.network("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F06%2F20180806140035_nnbed.thumb.700_0.png&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616430520&t=b40681968ba087b3533e17b9aa036450",
//         //   alignment: Alignment.bottomCenter,
//         //   color: Colors.blue,
//         //   colorBlendMode: BlendMode.screen,
//         //   fit: BoxFit.cover,
//         //   repeat: ImageRepeat.repeat,
//         // ),
//         width: 300,
//         height: 300,
//         decoration: BoxDecoration(
//           color: Colors.amberAccent,
//           borderRadius: BorderRadius.circular(300),
//           image: DecorationImage(
//             image: NetworkImage("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F06%2F20180806140035_nnbed.thumb.700_0.png&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616430520&t=b40681968ba087b3533e17b9aa036450"),
//             fit: BoxFit.cover
//           )
//         ),
//       ),
//     );
//   }
// }

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: ClipOval(
        child: Image.network("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F06%2F20180806140035_nnbed.thumb.700_0.png&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616430520&t=b40681968ba087b3533e17b9aa036450",
          width: 400,
          height: 400,
          fit: BoxFit.cover,
        ),
      ),
    );
  }
}