• 微信号:wumiao_357234902
您当前的位置:首页>web前端开发>其它

Flutter与一些常用的Dart语法

作者:Miao 阅读:2801次

关于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 or in orEach

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判断语句了。

4095412-193769d29f2477a9.webp.jpg

举个例子,如上图 现在页面上有文本显示和一个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结合使用:

2.webp.jpg

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()
        ],
      ),
    );
  }


原文作者:程序猿在广东

原文链接:https://www.jianshu.com/p/ae0d66016aec

本站部分文章、数据、素材收集于网络,所有版权均归源网站或原作者所有!

如果侵犯了您的权益,请来信告知我们下线删除,邮箱:357234902@qq.com

标签:其它