Flutter基础组件：开关、进度组件、图片组件、图标组件

前言

刚开始学习，主要是为了熟悉一下组件的基本用法。参考 Flutter | 老孟

开关

Switch

Switch(
 value: isOpen,
 onChanged: (value) {
   setState(() {
     isOpen = value;
   });
 })
1
2
3
4
5
6
7

添加图片

 Switch(
     value: isOpen,
     activeThumbImage: const AssetImage('lib/assets/img/qq.png'),
     onChanged: (value) {
       setState(() {
         isOpen = value;
       });
     })
1
2
3
4
5
6
7
8

注意：要在 pubspec.yaml文件中进行注册才行

flutter:
  uses-material-design: true
  assets:
  - lib/assets/img/qq.png
1
2
3
4

SwitchListTile

class _YcHomeBodyState extends State<YcHomeBody> {
  bool isOpen = true;
  @override
  Widget build(BuildContext context) {
    return Column(mainAxisAlignment: MainAxisAlignment.center, children: [
      SwitchListTile(
          value: isOpen,
          title: const Text("是否统一用户协议"),
          onChanged: (val) {
            setState((){
              isOpen = val;
            });
          })
    ]);
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

自适应平台

Switch 和 SwitchListTile 同样有自适应平台的方法分别是：Switch.adaptive 和 SwitchListTile.adaptive

进度组件

LinearProgressIndicator

水平进度组件

无参

class _YcHomeBodyState extends State<YcHomeBody> {
  bool isOpen = true;
  @override
  Widget build(BuildContext context) {
    return Column( mainAxisAlignment: MainAxisAlignment.center, children: const [
     LinearProgressIndicator()
    ]);
  }
}
1
2
3
4
5
6
7
8
9

有参

 LinearProgressIndicator(
          value: number, //当前进度
          minHeight: 20, //最新高度
          semanticsLabel: "当前进度：1", //不知道干啥的，没看出效果
          semanticsValue: '11', 不知道干啥的，没看出效果
          color: Colors.red //当前进度的颜色
          )
1
2
3
4
5
6
7

CircularProgressIndicator

CircularProgressIndicator 是圆形进度条，和LinearProgressIndicator用法一样：

class _YcHomeBodyState extends State<YcHomeBody> {
  @override
  Widget build(BuildContext context) {
    return const Center(
        child: CircularProgressIndicator()
    );
  }
}
1
2
3
4
5
6
7
8

CupertinoActivityIndicator

CupertinoActivityIndicator是ios风格的指示器，CupertinoActivityIndicator不能设置进度，只能一直转

class _YcHomeBodyState extends State<YcHomeBody> {
  double number = 0.3;
  @override
  Widget build(BuildContext context) {
    return const Center(
        child: CupertinoActivityIndicator(radius:60)  //值是半径
    );
  }
}
1
2
3
4
5
6
7
8
9

注： 需要导入 import 'package:flutter/cupertino.dart';

图片组件

图片组件是Flutter基础组件之一，和文本组件一样必不可少。图片组件包含Image和Icon两个组件，本质上Icon不属于图片组件，但其外形效果上类似于图片。

在项目中建议优先使用Icon组件，Icon本质上是一种字体，只不过显示的不是文字，而是图标，而Image组件先通过图片解码器将图片解码，所以Icon有如下优点：

• 通常情况下，图标比图片体积更小，显著的减少App包体积。
• 图标不会出现失真或者模糊的现象，例如将20x20的图片，渲染在200x200的屏幕上，图片会失真或模糊，而图标是矢量图，不会失真，就像字体一样。
• 多个图标可以存放在一个文件中，方便管理。
• 全平台通用。

Image

Image组件用于显示图片，图片的来源可以是网络、项目中图片或者设备上的图片。

加载网络图片

class _YcHomeBodyState extends State<YcHomeBody> {
  double number = 0.3;
  @override
  Widget build(BuildContext context) {
    return Center(
        child: Image.network(
      "https://profile-avatar.csdnimg.cn/default.jpg",  //路径，必填参数
      width: 200,
      height: 200,
    ));
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

加载本地图片

加载本地图片需要在pubspec.yaml

//加载图片所在的目录，推荐
assets:
  - assets/images/

//加载具体的图片
assets:
  - assets/images/aa.jpg
1
2
3
4
5
6
7

class _YcHomeBodyState extends State<YcHomeBody> {
  double number = 0.3;
  @override
  Widget build(BuildContext context) {
    return Center(
        child: Image.asset(
      "lib/assets/img/qq.png",  //路径，必填参数
      width: 200,
      height: 200,
    ));
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

加载设备上的图片

要加载设备（手机）上的图片首先需要获取设备图片的路径，由于不同平台的路径不同，因此路径的获取必须依靠原生支持，如果了解原生（Android和iOS）开发，可以直接使用MethodChannel获取路径，如果不懂原生（Android和iOS）开发，可以使用第三方插件获取路径，这里推荐官方的 path_provider 。

咱们这里直接使用官方推荐的插件：

• 下载，在终端里使用flutter pub add path_provider 进行下载
• 下载完后后会字段在pubspec.yaml 添加依赖声明

dependencies:
  path_provider: ^2.0.11
1
2

获取目录demo

import 'dart:io';

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

//使用箭头函数简写
main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  //创建widget的唯一标识
  const MyApp({Key? key}) : super(key: key);

  //重写build方法
  @override
  Widget build(BuildContext context) {
    //返回一个material类型的app
    return const MaterialApp(
      //指定显示哪一个页面
      home: YcHomePage(),
    );
  }
}

//app的主页面
class YcHomePage extends StatelessWidget {
  const YcHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    //首页需要有导航和内容，这里借助Scaffold来快速创建
    return Scaffold(
      //导航条
      appBar: AppBar(
        title: const Text("图片", style: TextStyle(color: Colors.white)),
      ),
      //页面主题内容
      body: const YcHomeBody(),
    );
  }
}

class YcHomeBody extends StatefulWidget {
  const YcHomeBody({Key? key}) : super(key: key);
  @override
  State<YcHomeBody> createState() => _YcHomeBodyState();
}

class _YcHomeBodyState extends State<YcHomeBody> {
  //临时目录
  Future<Directory?>? _tempDirectory;
  //app支持的目录
  Future<Directory?>? _appSupportDirectory;
  //app资源目录
  Future<Directory?>? _appLibraryDirectory;
  //app文档目录
  Future<Directory?>? _appDocumentsDirectory;
  //外部文档目录
  Future<Directory?>? _externalDocumentsDirectory;
  //外部存储目录
  Future<List<Directory>?>? _externalStorageDirectories;
  //外部缓存目录
  Future<List<Directory>?>? _externalCacheDirectories;
  //下载目录
  Future<Directory?>? _downloadsDirectory;

  //请求临时目录
  void _requestTempDirectory() {
    setState(() {
      _tempDirectory = getTemporaryDirectory();
    });
  }

  //请求app文档目录
  void _requestAppDocumentsDirectory() {
    setState(() {
      _appDocumentsDirectory = getApplicationDocumentsDirectory();
    });
  }

//请求app支持的目录
  void _requestAppSupportDirectory() {
    setState(() {
      _appSupportDirectory = getApplicationSupportDirectory();
    });
  }

//请求app资源目录
  void _requestAppLibraryDirectory() {
    setState(() {
      _appLibraryDirectory = getLibraryDirectory();
    });
  }

//请求外部存储目录
  void _requestExternalStorageDirectory() {
    setState(() {
      _externalDocumentsDirectory = getExternalStorageDirectory();
    });
  }

//请求外部存储目录列表
  void _requestExternalStorageDirectories(StorageDirectory type) {
    setState(() {
      _externalStorageDirectories = getExternalStorageDirectories(type: type);
    });
  }

//请求外部缓存目录
  void _requestExternalCacheDirectories() {
    setState(() {
      _externalCacheDirectories = getExternalCacheDirectories();
    });
  }

//请求下载目录
  void _requestDownloadsDirectory() {
    setState(() {
      _downloadsDirectory = getDownloadsDirectory();
    });
  }

  //单个文件夹组件
  Widget _buildDirectory(
      BuildContext context, AsyncSnapshot<Directory?> snapshot) {
    Text text = const Text('');
    if (snapshot.connectionState == ConnectionState.done) {
      if (snapshot.hasError) {
        text = Text('Error: ${snapshot.error}');
      } else if (snapshot.hasData) {
        text = Text('path: ${snapshot.data!.path}');
      } else {
        text = const Text('路径无效');
      }
    }
    return Padding(padding: const EdgeInsets.all(16.0), child: text);
  }

  //文件夹列表组件
  Widget _buildDirectories(
      BuildContext context, AsyncSnapshot<List<Directory>?> snapshot) {
    Text text = const Text('');
    if (snapshot.connectionState == ConnectionState.done) {
      if (snapshot.hasError) {
        text = Text('Error: ${snapshot.error}');
      } else if (snapshot.hasData) {
        final String combined =
            snapshot.data!.map((Directory d) => d.path).join(', ');
        text = Text('paths: $combined');
      } else {
        text = const Text('路径无效');
      }
    }
    return Padding(padding: const EdgeInsets.all(16.0), child: text);
  }

  @override
  Widget build(BuildContext context) {
    return Center(
        child: ListView(
      children: [
        //临时目录，必须要有对应的构造方法FutureBuilder
        Column(children: [
          ElevatedButton(
            onPressed: _requestTempDirectory,
            child: const Text(
              '获取临时目录',
            ),
          ),
          FutureBuilder<Directory?>(
            future: _tempDirectory,
            builder: _buildDirectory,
          ),
        ]),
        //获取应用程序文档目录
        Column(
          children: [
            ElevatedButton(
                onPressed: _requestAppDocumentsDirectory,
                child: const Text("获取应用程序文档目录")),
            FutureBuilder<Directory?>(
              future: _appDocumentsDirectory,
              builder: _buildDirectory,
            ),
          ],
        ),
        //获取应用程序支持目录
        Column(
          children: [
            ElevatedButton(
                onPressed: _requestAppSupportDirectory,
                child: const Text("获取应用程序支持目录")),
            FutureBuilder<Directory?>(
              future: _appSupportDirectory,
              builder: _buildDirectory,
            ),
          ],
        ),
        // 请求外部存储目录
        Column(
          children: [
            ElevatedButton(
                onPressed: !Platform.isAndroid
                    ? null
                    : _requestExternalStorageDirectory,
                child: Text(!Platform.isAndroid
                    ? '外部存储不可用'
                    : '获取外部存储目录')),
            FutureBuilder<Directory?>(
              future: _externalDocumentsDirectory,
              builder: _buildDirectory,
            ),
          ],
        )
      ],
    ));
  }
}
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217

加载图片demo
大体意思是这样的，但是不知道如何把图片放到这个目录下，失败了😅

class _YcHomeBodyState extends State<YcHomeBody> {
  //外部文档目录
  Future<Directory?>? _externalDocumentsDirectory;

//请求外部存储目录
  void _requestExternalStorageDirectory() {
    setState(() {
      _externalDocumentsDirectory = getExternalStorageDirectory();
    });
  }

  //单个文件夹组件
  Widget _buildDirectory(
      BuildContext context, AsyncSnapshot<Directory?> snapshot) {
    Text text = const Text('');
    String path = '';
    if (snapshot.connectionState == ConnectionState.done) {
      if (snapshot.hasError) {
        text = Text('Error: ${snapshot.error}');
      } else if (snapshot.hasData) {
        text = Text('path: ${snapshot.data!.path}');
        path = snapshot.data!.path;
      } else {
        text = const Text('路径无效');
      }
    }
    if (path != '') {
      return Column(
        children: [
          text,
          Image.file(
            File('$path/qq.png'),
            width: 200,
          )
        ],
      );
    } else {
      return Padding(padding: const EdgeInsets.all(16.0), child: text);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Center(
        child: ListView(
      children: [
        // 请求外部存储目录
        Column(
          children: [
            ElevatedButton(
                onPressed: !Platform.isAndroid
                    ? null
                    : _requestExternalStorageDirectory,
                child: Text(!Platform.isAndroid ? '外部存储不可用' : '获取外部存储目录')),
            FutureBuilder<Directory?>(
              future: _externalDocumentsDirectory,
              builder: _buildDirectory,
            ),
          ],
        )
      ],
    ));
  }
}
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

Icon

Icon是图标组件，Icon不具有交互属性，如果想要交互，可以使用IconButton。

加载

  Icon(Icons.add)
1

设置大小和颜色

Icon(
  Icons.add,
  size: 30,
  color: Colors.blue,
)
1
2
3
4
5