Flutter与一些常用的Dart语法
前言
上一次写了flutter相关的文章还是在7月份，如今都flutter2.5正式版了，官网都焕然一新了。
文章图片
于是乎，不要等了是时候学习了，开始记录下flutter开发过程中dart的一些常用语法，可以帮助我们事半功倍。
关于Dart
Dart 是一门为全平台构建快速应用的客户端优化的编程语言，它的优点如下：
- 为 UI 构建：优化使用针对用户界面的创造进行优化的语言进行开发
- 研发生产力提高：可反复地修改，然后在正在运行的应用中使用热重载立刻看到您的修改
- 在全平台极速运行：可编译为移动端、桌面端及后端的 ARM & x64 的二进制文件，或是为 Web 平台编译 Javascript
List数组的常用方法
数组 (Array) 是几乎所有编程语言中最常见的集合类型，在 Dart 中数组由 List 对象表示。接下来运用使用dart工具来运行这些常用的方法，工具：https://dartpad.cn
- 定义固定长度数组
void main() {var list = List(2);
print('$list');
// [null, null]}- 定义混合类型数组
void main() {
var list = List();
list.add('我是文本');
list.add(0.66);
print(list);
// [我是文本, 0.66]} - 获取数组第一个元素
void main() {
var list = [1, 2, 2, 3, 4, 5, 6, 6];
print(list.first);
// 1
}- 获取数组最后一个元素
void main() {
var list = [1, 2, 2, 3, 4, 5, 6, 6];
print(list.last);
// 6
}- 获取倒序迭代器 - reversed
void main() {
var list = [1, 2, 2, 3, 4, 5, 6, 6];
print(list.reversed);
// (6, 6, 5, 4, 3, 2, 2, 1)
}- 批量添加 - addAll或者 扩展操作符（...）和 空感知扩展操作符（...?）
void main() {
var list = [1, 2, 2, 3, 4, 5, 6, 6];
var list2 = [0, 20, 40];
list.addAll(list2);
print(list);
//[1, 2, 2, 3, 4, 5, 6, 6, 0, 20, 40]
}或使用扩展操作符，结果是一样的
void main() {
var list2 = [0, 20, 40];
var list = [1, 2, 2, 3, 4, 5, 6, 6, ...?list2];
print(list);
//[1, 2, 2, 3, 4, 5, 6, 6, 0, 20, 40]
}- 判断数组内是否有满足条件的元素- any
void main() {
var list = [1, 2, 2, 3, 4, 5, 6, 6];
// 数组中是否有大于3的元素
print(list.any((v) => v > 3));
// true
// 数组中是否有大于7的元素
print(list.any((v) => v > 7));
// false
}- 判断数组所有元素是否都满足设定条件 - every
void main() {
var list = [1, 2, 2, 3, 4, 5, 6, 6];
// 数组中所有元素是否都大于0
print(list.every((v) => v > 0));
// true
// 数组中所有元素是否都大于5
print(list.every((v) => v > 5));
// false
}- 获取满足条件的元素 - where
void main() {
var list = [1, 2, 2, 3, 4, 5, 6, 6];
// 获取所有大于3的元素
print(list.where((v) => v > 3).toList());
//[4, 5, 6, 6]
}- 获取满足条件的第一个元素 - firstWhere
void main() {
var list = [1, 2, 2, 3, 4, 5, 6, 6];
// 获取最后一个大于3的元素
print(list.firstWhere((v) => v > 3));
// 4
// 如果未查找到所制定条件的元素，进入orElse参数
list.firstWhere((v) => v > 6, orElse: () {
print(888);
});
}获取满足条件的最后一个元素 - lastWhere （与firstWhere同理，第一个与最后一个的区别）
- 从指定位置开始，获取满足条件的第一个元素的索引 - indexWhere
void main() {
var list = [1, 2, 2, 3, 4, 5, 6, 6];
// 查询第一个大于3的元素索引值
print(list.indexWhere((v) => v > 3));
// 4
// 从索引3开始，查询第一个大于4的元素索引值
print(list.indexWhere((v) => v > 4, 3));
// 5
// 从索引3开始，查询第一个大于6的元素索引值
// 若不存在，返回-1
print(list.indexWhere((v) => v > 6, 3));
// -1
}获取满足条件的最后一个元素的索引(倒叙查询) - lastIndexWhere（与indexWhere同理，第一个与最后一个的区别）
- 从指定位置开始，获取指定值的索引 - indexOf
void main() {
var list = [1, 2, 2, 3, 4, 5, 6, 6];
// 从索引6开始，获取5第一次出现时的索引值，如果不存在，返回 -1
print(list.indexOf(5, 6));
// -1
print(list.indexOf(5));
// 5
}从指定位置开始，倒叙获取指定值的索引 - lastIndexOf（与indexOf同理，第一次与最后一次的区别）
- 将数组用指定字符拼接成字符串 - join
void main() {
var list = [1, 2, 2, 3, 4, 5, 6, 6];
// 将数组转换为用英文逗号拼接的字符串
print(list.join(','));
// 1,2,2,3,4,5,6,6
}- 数组去重 - toSet
void main() {
var list = [1, 2, 2, 3, 4, 5, 6, 6];
print(list.toSet());
// {1, 2, 3, 4, 5, 6}
}- 数组遍历 - for\for in\forEach
void main() {
var list = [1, 2, 2, 3, 4, 5, 6, 6];
//for
for (var i = 0;
i < list.length;
i++) {
print("for:$i");
}
//for in
for (var item in list) {
print("for in:$item");
}
//forEach
list.forEach((element) {
print("forEach:$element");
});
}- 按指定条件返回 - map
void main() {
var list = [1, 2, 2, 3, 4, 5, 6, 6];
// 将list所有元素加1并返回数组
var v = list.map((e) {
return e + 1;
}).toList();
print(v);
//[2, 3, 3, 4, 5, 6, 7, 7]
}- 累加器 - reduce
void main() {
var list = [1, 2, 2, 3, 4, 5, 6, 6];
// 将每次返回值作为value循环执行。最终返回最后一次执行值
var count = list.reduce((value, element) {
print('value: $value - element: $element');
/**每次的执行结果
value: 1 - element: 2
value: 3 - element: 2
value: 5 - element: 3
value: 8 - element: 4
value: 12 - element: 5
value: 17 - element: 6
value: 23 - element: 6
*/
return value + element;
});
print('count: $count');
// count: 29
}- 排序 - sort
void main() {
var list = [1, 2, 2, 3, 4, 5, 6, 6];
// a - b 为升序， b - a为降序
list.sort((a, b) {return b - a;
});
print(list);
//[6, 6, 5, 4, 3, 2, 2, 1]
}条件表达式与if语句~在布局中使用
在flutter开发写页面时，经常都会处理一些判断逻辑，比如什么时候显示xxx按钮，什么时候隐藏xxx布局，这里常用的就是条件表达式与if判断语句了。
文章图片
举个例子，如上图 现在页面上有文本显示和一个button1，我要隐藏页面的button1， 使用条件表达式：
class _MyHomePageState extends State {
bool _showButton1 = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("页面标题"),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'我是文本描述',
),
_showButton1
? RaisedButton(
onPressed: () {},
child: Text("Button1"),
)
: SizedBox()
],
),
);
}} 【Flutter与一些常用的Dart语法】这里用了条件表达式来判断是否显示Button1，如果不显示Button1就显示SizedBox()，所以这里不管怎么都要显示一个widget，显然不是最好的写法，因此这里改用if语句会更好
class _MyHomePageState extends State {
bool _showButton1 = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("页面标题"),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'我是文本描述',
),
if (_showButton1)
RaisedButton(
onPressed: () {},
child: Text("Button1"),
)
],
),
);
}} 扩展操作符（...）与List map ~在布局中使用
在flutter开发写页面时，经常都会处理一些List数组相关的数据，比如现在有一个String数组，里面元素需要作为按钮名称展示出来，这时会有很多写法，其中比较简洁明了的就是扩展操作符与map结合使用：
文章图片
Widget _body() {
List buttonNames = [
"button1",
"button2",
"button3",
"button4",
];
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'我是文本描述',
),
...?buttonNames
.map((name) => RaisedButton(
onPressed: () {},
child: Text("$name"),
))
.toList()
],
),
);
} 最后还有很多很多等着我去实践去总结的知识点，这篇暂且记录到此，改天再见！
--------END---------
推荐阅读
- JAVA（抽象类与接口的区别&重载与重写&内存泄漏）
- Docker应用:容器间通信与Mariadb数据库主从复制
- 《真与假的困惑》???|《真与假的困惑》??? ——致良知是一种伟大的力量
- 第326天
- Shell-Bash变量与运算符
- 今天写一些什么
- 逻辑回归的理解与python示例
- Guava|Guava RateLimiter与限流算法
- 我和你之前距离
- CGI，FastCGI，PHP-CGI与PHP-FPM