【笔记】Flutter的Image图片组件

发表于 更新于 分类于 阅读次数：

前言

Flutter的Image图片组件学习笔记

Image图片组件

加载图片

加载远程图片

1
2
3
4
5
6
7
8
9
import 'package:flutter/material.dart';

void main() {
  runApp(Center(
    child: Container(
      child: Image.network("<src>"),
    ),
  ));
}

加载本地图片

添加静态资源文件
  • 在项目跟目录下创建images，并在images目录下创建2.0x和3.0x目录
  • 图片资源文件需要同时在存放在images、images/2.0x、images/3.0x目录下
1
2
3
4
5
6
7
+ 项目名
  + images
    + 2.0x
      - img.jpg
    + 3.0x
      - img.jpg
    - img.jpg
修改配置文件
  • 加载图片静态资源
pubspec.yaml
1
2
3
4
5
flutter:
  assets:
    - images/2.0x/img.jpg
    - images/3.0x/img.jpg
    - images/img.jpg
加载本地图片
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text("文本内容"),
      ),
      body: const Column(
        children: [
          App(),
        ],
      ),
    ),
  ));
}

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Image.asset(
          "images/img.jpg",
          fit: BoxFit.cover
      ),
    );
  }
}

缩小图片

1
2
3
4
5
6
7
8
9
10
11
import 'package:flutter/material.dart';

void main() {
  runApp(Center(
    child: Container(
      child: Image.network(
          scale: 2,
      ),
    ),
  ));
}

指定图片在容器中的位置

1
2
3
4
5
6
7
8
9
10
11
import 'package:flutter/material.dart';

void main() {
  runApp(Center(
    child: Container(
      child: Image.network(
          alignment: Alignment.center,
      ),
    ),
  ));
}

图片填充方式

拉伸

BoxFit.contain：缺省值，原图
BoxFit.cover：裁剪，超出隐藏
BoxFit.fill：拉伸
BoxFit.fitWidth：拉伸宽度
BoxFit.fitHeight：拉伸高度

1
2
3
4
5
6
7
8
9
10
11
import 'package:flutter/material.dart';

void main() {
  runApp(Center(
    child: Container(
      child: Image.network(
        fit: BoxFit.fill,
      ),
    ),
  ));
}

平铺

ImageRepeat.repeat：x轴和y轴平铺
ImageRepeat.repeatX：x轴平铺
ImageRepeat.repeatY：y轴平铺

1
2
3
4
5
6
7
8
9
10
11
import 'package:flutter/material.dart';

void main() {
  runApp(Center(
    child: Container(
      child: Image.network(
        repeat: ImageRepeat.repeat,
      ),
    ),
  ));
}

通过Image图片定义一个圆形图片

通过Container实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text("文本内容"),
      ),
      body: Column(
        children: const [
          Circular()
        ],
      ),
    ),
  ));
}

class Circular extends StatelessWidget {
  const Circular({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 150,
      width: 150,
      decoration: BoxDecoration(
        color: Colors.red,
        borderRadius: BorderRadius.circular(75),
        image: DecorationImage(
          image: NetworkImage("<src>"),
          fit: BoxFit.cover
        ),
      ),
    );
  }
}

通过ClipOval实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text("文本内容"),
      ),
      body: Column(
        children: const [
          Circular()
        ],
      ),
    ),
  ));
}

class Circular extends StatelessWidget {
  const Circular({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return ClipOval(
      child: Image.network(
        "https://avatars.githubusercontent.com/u/49089085?s=40&v=4",
        width: 150,
        height: 150,
        fit: BoxFit.cover,
      ),
    );
  }
}

完成

参考文献

哔哩哔哩——筱筱知晓