关于flutter:Flutter与一些常用的Dart语法

前言

上一次写了 flutter 相干的文章还是在 7 月份，现在都 flutter2.5 正式版了，官网都面目一新了。

于是乎，不要等了是时候学习了，开始记录下 flutter 开发过程中 dart 的一些罕用语法，能够帮忙咱们事倍功半。

对于 Dart

Dart 是一门为全平台构建疾速利用的客户端优化的编程语言，它的长处如下：

• 为 UI 构建：优化应用针对用户界面的发明进行优化的语言进行开发
• 研发生产力进步：可重复地批改，而后在正在运行的利用中应用热重载立即看到您的批改
• 在全平台极速运行：可编译为挪动端、桌面端及后端的 ARM & x64 的二进制文件，或是为 Web 平台编译 Javascript

 接下来次要记录 Flutter 开发中罕用的 dart 语法，而后如何更方便快捷地实现一些 flutter 小小的性能。对于更多 Dart 相干的知识点，这里不会一一赘述，不过咱们能够到官网系统性地学习 Dart 语言，这也是 Flutter 开发的必备语言，官网地址如下：Dart：https://dart.cn/

List 数组的罕用办法

数组 (Array) 是简直所有编程语言中最常见的汇合类型，在 Dart 中数组由 List 对象示意。接下来使用应用 dart 工具来运行这些罕用的办法， 工具：https://dartpad.cn

• 定义固定长度数组

void main() {  var list = List(2);  print('$list'); // [null, null]}

• 定义混合类型数组

void main() {var list = List<dynamic>();
  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]
}

条件表达式与 i f 语句~ 在布局中应用

在 flutter 开发写页面时，常常都会解决一些判断逻辑，比方什么时候显示 xxx 按钮，什么时候暗藏 xxx 布局，这里罕用的就是条件表达式与 if 判断语句了。

举个例子，如上图 当初页面上有文本显示和一个 button1，我要暗藏页面的 button1，应用条件表达式：

class _MyHomePageState extends State<MyHomePage> {
  bool _showButton1 = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("页面题目"), 
     ),
      body: Column( 
       mainAxisAlignment: MainAxisAlignment.center, 
       children: <Widget>[ 
         Text('我是文本形容',),
          _showButton1
              ? RaisedButton(onPressed: () {},
                  child: Text("Button1"), 
               ) 
             : SizedBox()],
      ),
    );
  }}

这里用了条件表达式来判断是否显示 Button1，如果不显示 Button1 就显示 SizedBox()，所以这里不管怎么都要显示一个 widget，显然不是最好的写法，因而这里改用 if 语句会更好

class _MyHomePageState extends State<MyHomePage> {
  bool _showButton1 = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("页面题目"),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text('我是文本形容',),
          if (_showButton1) 
           RaisedButton(onPressed: () {},
              child: Text("Button1"), 
           ) 
       ], 
     ),
    );
  }}

扩大操作符（…）与 List map ~ 在布局中应用

在 flutter 开发写页面时，常常都会解决一些 List 数组相干的数据，比方当初有一个 String 数组，外面元素须要作为按钮名称展现进去，这时会有很多写法，其中比拟简洁明了的就是扩大操作符与 map 联合应用：

Widget _body() {
    List<String> buttonNames = [
      "button1",
      "button2",
      "button3", 
     "button4",
    ]; 
   return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text('我是文本形容',),
          ...?buttonNames 
             .map((name) => RaisedButton(onPressed: () {},
                    child: Text("$name"), 
                 )) 
             .toList()],
      ),
    );
  }

最初还有很多很多等着我去实际去总结的知识点，这篇暂且记录到此，改天再见！

                              --------  END  ---------