生活札记

Flutter学习笔记 - 入门(一)

copylian    1 评论    15330 浏览    2023.03.30

一、概念

Dart是谷歌开发的计算机编程语言,是一个为全平台构建快速应用的客户端优化的编程语言。

Flutter 是 Google 开源的应用开发框架,仅通过一套代码库,就能构建精美的、原生平台编译的多平台应用。Flutter 为软件开发行业带来了革新:只要一套代码库,即可构建、测试和发布适用于移动、Web、桌面和嵌入式平台的精美应用。

环境安装:https://baijiahao.baidu.com/s?id=1758041451400588196&wfr=spider&for=pc

教程:https://www.bilibili.com/video/BV1fd4y1E79f

教程:https://www.bilibili.com/video/BV1PA411U79T


二、Dart:Dart是谷歌开发的计算机编程语言,是一个为全平台构建快速应用的客户端优化的编程语言。一切皆对象,在 Dart 语言中所有变量类型都是对象null 也是对象,函数也是对象,所有对象都继承自 Object。尽管 Dart 是强类型语言,但是变量类型声明是可选的,Dart 可以推断出变量的类型。Dart 支持泛型类型,函数支持嵌套不支持public、protected和 private 关键字,通过下划线 _ 开头命名的话,就表示是私有的,反之就是公开的。

官网:https://dart.cn/

Dart环境:https://github.com/GeKorm/dart-windowshttps://gekorm.com/dart-windows/下载安装。

微信图片_20230330114850.png

Dart基础:01-基础.dart

// 导入类

import '02-Class.dart';


// 导入库

import 'dart:math'; // 内置库

import 'libs/calculator.dart' as cal; // 自定义库, 导入可直接使用方法, as 设置别名后, 需要通过别名访问:cal.random(10)


import 'dart:convert' as convert;

import 'package:http/http.dart' as http;


// 测试方法

printHello(String name) {

  var a = "Ha Ha Ha,";

  print(name + " $a Hello Dart!");

}


// 换行

var endStr = "--------------------------------------------------------\n";


// 枚举

enum EnumDatas { none, running, stopped, paused }


// Dart入口函数

main() async {

  // 1、注释

  // 单行注释


  /*

  多行注释

  */

  print(endStr);


  // 2、变量, 变量默认值都是null

  var name = "变量-name:";

  // name = 100; // 无法复制不同类型的变量值

  printHello(name);


  // 不初始化

  int? sex;

  print("变量-sex: $sex");


  int age = 100;

  print("变量-age: $age");


  // 双精度

  double a = 10;

  print('变量-a: $a');


  // 变量值不能被改变

  final DateTime b = new DateTime.now();

  const c = 10;

  print("变量-c: $b");

  print("变量-c: ${c}");

  print(endStr);


  // 3、数字

  // Sting 转 int

  var one = int.parse("1");

  print("数字-one: $one");


  // String 转 double

  var two = double.parse("3.1415");

  print("数字-two: $two");


  // num 转字符串

  var three = 1.toString();

  print("数字-three: $three");


  var four = 3.1415926.toString();

  print("数字-four: $four");

  print(endStr);


  // 4、多行字符串:

  // 属性:codeUnits、isEmpty、length

  // 方法:toLowerCase()、toUpperCase()、trim()、compareTo()、replaceAll()、split()、substring()、toString()、codeUnitAt()

  var s1 = """

  多行字符串

  多行字符串

""";

  var s2 = '''

多行字符串

多行字符串

''';

  print("字符串-s1: " + s1);

  print("字符串-s2: " + s2);

  print(endStr);


  // 5、bool布尔值

  // 检查空字符串

  var fullName = '';

  var fullNameBool = fullName.isEmpty;

  print("bool布尔值-检查空字符串: $fullNameBool");


  // 检查零值

  var hitPoints = 0;

  var hitPointsBool = hitPoints <= 0;

  print("bool布尔值-检查零值: $hitPointsBool");


  // 检查是否为null

  var unicorn;

  var unicornBool = unicorn == null;

  print("bool布尔值-检查是否为null: $unicornBool");


  // 检查NaN

  var iMeantToDoThis = 0 / 0;

  var iMeantToDoThisBool = iMeantToDoThis.isNaN;

  print("bool布尔值-检查NaN: $iMeantToDoThisBool");

  print(endStr);


  // 5、list数组

  // 属性:first、isEmpty、isNotEmpty、length、last、reversed、single

  // 方法:add()、addAll()、insert()、insertAll()、replaceRange()、remove()、removeAt()、removeLast()、removeRange()

  var list1 = [1, 2, 3, 4];

  print("list数组-list1: ${list1.length}");

  print("list数组-list1[0]: $list1[0]");


  // list数组常量

  var list2 = const [1, 2, 3, 4];

  print("list数组-常量数组: ${list2}");


  // 扩展运算符 ...

  var list3 = [1, 2, 3, 4];

  var list4 = [1, 2, 3, 4, ...list3];

  print("list数组-扩展运算符 ...: ${list4}");


  // 如果是null可以使用 ...? 来判断验证

  var list5;

  var list6 = [1, 2, 3, 4, ...?list5];

  print("list数组-扩展运算符 ...?: ${list6}");


  // if 和 collection 的集合,使用它在 if 条件和 for 循环构建集合

  // list数组表达式

  var condition = true;

  var list7 = [1, if (condition) 2];

  print("list数组-if 条件: ${list7}");


  var list8 = [1, 2, 3, 4, 5];

  var list9 = ["#0", for (var i in list8) "#$i"];

  print("list数组-for循环 条件: ${list9}");

  print(endStr);


  // 6、set集合:是无序的唯一项的集合

  var set1 = <String>{};

  // Set<String> set2 = {};

  print("set集合: ${set1}");


  // 添加set元素: add、addAll

  set1.add("set1");

  set1.addAll({"set2", "set3"});

  print("set集合-添加元素: ${set1}");


  // 固定集合

  // final set2 = <String>{};

  // const set3 = <String>{};

  print(endStr);


  // 7、map对象:关联键和值

  // 属性:Keys、Values、Length、isEmpty、isNotEmpty

  // 方法:add()、addAll()、clear()、remove()、forEach()

  var map1 = {"a": 1, "b": 2};

  // var map1 = Map();

  map1["c"] = 3;

  map1["b"] = 222;

  print("map对象-map1: ${map1}");

  print("map对象-长度: ${map1.length}");

  print("map对象-null: ${map1[0] == null}");


  // 固定map

  // final map2 = {};

  print(endStr);


  // 8、Rune:用来表示字符串中的 UTF-32 编码字符

  var rune1 = '\u{1f44f}';

  print("Rune-rune1: ${rune1}");


  Runes rune2 = new Runes('\u{2665} \u{1f605} \u{1f60e} \u{1f47b} \u{1f596} \u{1f44d}');

  print("Rune-rune2: ${new String.fromCharCodes(rune2)}");

  print(endStr);


  // 9、枚举

  print("枚举: ${EnumDatas.values}");

  EnumDatas.values.forEach((v) => print('枚举: value: $v, index: ${v.index}'));

  print('枚举-running: ${EnumDatas.running}, ${EnumDatas.running.index}');

  print('枚举-running index: ${EnumDatas.values[1]}');

  print(endStr);


  // 10、函数

  testFunc(f1, [f2 = "func2", f3]) {

    return "${f1}:${f2}:${f3}";

  }


  print("函数-可选位置参数: ${testFunc("func1")}");


  testFunc2(s1, {s2, s3 = "s3"}) {

    return "${s1}:${s2}:${s3}";

  }


  print("函数-可选命名参数: ${testFunc2("string1", s2: "string2")}");


  // 匿名函数

  list1.forEach((item) => print('函数-匿名函数:${list1.indexOf(item)}: $item'));


  // 箭头函数

  printMsg() => print("函数-箭头函数:printMsg()");

  printMsg();

  // int testMsg() => 1;

  int testMsg() => () {

        return 1;

      }();

  print("函数-箭头函数: ${testMsg()}");


  // 自动执行函数

  (auto1, auto2) {

    print("函数-自动执行函数: ${auto1},${auto2}");

  }(1, 2);


  // 闭包函数

  var add = () {

    var counter = 0;

    return () {

      return counter += 1;

    };

  }();

  print("函数-闭包函数: ${add()}");


  print(endStr);


  // 11、运算符

  // 级联运算符:级联(..)运算符可用于通过对象发出一系列调用

  // 类型判定符:as、is、is!


  // 12、类

  var mixClass = new MixClass("只袄早");

  var mixClass2 = new MixClass.getPersonInfo("只袄早", 1, "女");


  // identical 检查两个引用是否指向同一个对象

  print("类-identical 检查两个引用是否指向同一个对象: ${identical(mixClass, mixClass2)}");


  // 访问私有属性

  // print(mixClass._privateNum);


  // Getter、Setter

  mixClass.setPrivateNum = 1000;

  var privateNum = mixClass.getPrivateNum;

  print("类-Getter、Setter: ${privateNum}");

  print(endStr);


  // 13、异常:try...on...catch...finally, 如果 on 成立那么跳过catch

  // 内置异常:

  // DeferredLoadException - 延迟库无法加载时抛出()

  // FormatException - 当字符串或某些其他数据没有预期格式且无法解析或处理时抛出异常

  // IOException - 所有与输入输出相关的异常的基类

  // IntegerDivisionByZeroException - 当数字除以零时抛出

  // IsolateSpawnException - 无法创建隔离时抛出

  // Timeout- 在等待异步结果时发生计划超时时抛出

  try {

    int x = 12;

    int y = 0;

    int res;

    res = x ~/ y;

    print("异常-trye:  ${res}");

  } on IntegerDivisionByZeroException {

    print("异常: on");

  } catch (e) {

    print("异常-catch: ${e.toString()}");

  } finally {

    print("异常: finally 都会执行");

  }

  print(endStr);


  // 自定义异常:继承Exception类

  // class AmtException implements Exception {

  //   String errMsg() => '错误';

  // }


  // 14、库:内置库、自定义库、第三方库

  // dart:io           | 服务器应用程序的文件,套接字,HTTP和其他I/O支持。此库在基于浏览器的应用程序中不起作用。默认情况下会导入此库。

  // dart:core       | 每个Dart程序的内置类型,集合和其他核心功能。默认情况下会导入此库。

  // dart:math       | 数学常数和函数,随机数生成器。

  // dart:convert    | 用于在不同数据表示之间进行转换的编码器和解码器,包括JSON和UTF-8。

  // dart:typed_data | 有效处理固定大小数据的列表(例如,无符号8字节整数)。

  print("库-内置库: ${pow(2, 3)}");

  print("库-自定义库: ${cal.random(10)}");


  // 导入部分库:import 'package:lib1/lib1.dart' show foo;

  // 排除部分库:import 'package:lib2/lib2.dart' hide foo;

  // 延迟加载库:import 'package:greetings/hello.dart' deferred as hello;


  // 第三方库:art 的软件包管理器是 pub,Pub有助于在存储库中安装包,托管软件包的存储库可以在 https://pub.dartlang.org/ 找到,包元数据在文件 pubsec.yaml 中定义,每个 Dart 应用程序都有一个 pubspec.yaml 文件

  // pub命令: pub get、pub upgrade、pub build、pub help

  // var url = Uri.https('www.googleapis.com', '/books/v1/volumes', {'q': '{http}'});

  // var response = await http.get(url);

  // print("库-第三方库: ${response}");


  print(endStr);


  // 15、泛型:可以减少重复的代码,T 是一个备用类型

  // class Cache<T> {

  //   T getByKey(String key);

  //   void setByKey(String key, T value);

  // }

  T first<T>(List<T> ts) {

    // Do some initial work or error checking, then...

    T tmp = ts[0];

    // Do some additional checking or processing...

    return tmp;

  }


  print("泛型-方法: ${first(["a", "b", "c"])}");


  print(endStr);


  // 16、异步:Dart都是基于单线程加事件循环来完成耗时操作的处理

  // Future:

  Future.delayed(Duration(seconds: 3), () {

    return "3秒后的信息";

  }).then((value) {

    print("异步-Future: ${value}");

  });


  // async、await:只是一个语法糖,本质还是Future对象,await 会阻塞当前函数,直到完成

  // await 关键字必须存在于 async 函数中,使用 async 标记的函数,必须返回一个 Future 对象

  Future<String> getNetworkData() async {

    var result = await Future.delayed(Duration(seconds: 3), () {

      return "3秒后的信息";

    });

    print("Future");

    return "请求到的数据:$result";

  }


  getNetworkData().then((value) => print("异步-async、await: ${value}"));


  print(endStr);


  // 17、新特性

  // 空安全(Sound null safety)是 Dart 2.12 中新增的一项特性

  String? ename;

  // String? ename = null;

  print("新特性-空安全: ${ename}");


  // late:表示延迟初始化,通常用于延迟加载(比如网络请求),late 声明的变量在使用前一定要进行初始化

  late String abcname;

  abcname = "abcname";

  print("新特性-空安全: ${abcname}");


  // @required:可以通过 @required 来注解 Dart 中的命名参数,用来指示它是必填参数

}


第三方库 pubsec.yaml 文件

name: DartFullter

version: 0.0.1

description: 这是我的第一个dart程序

environment:

  sdk: '>=2.19.0 <3.0.0'

dependencies:

  http: ^0.13.5

  maths: ^0.0.2


Dart类Class:02-Class.dart

// 类

// 人物抽象类

abstract class Person {

  // 参数

  late String pname;

  late int page;

  late String psex;


  // 方法

  personInfo();

}


// 动物抽象类

abstract class Animal {

  // 参数

  late String atype;

  late String aname;


  // 方法

  animalInfo();

}


// PersonAnimal类 通过implements实现多个接口

class PersonAnimal implements Person, Animal {

  // 重写属性

  late String pname;

  late int page;

  late String psex;

  late String atype;

  late String aname;


  // 重写方法

  personInfo() {

    return "人物信息: " +

        "姓名: " +

        this.pname +

        ", 年龄: " +

        this.page.toString() +

        ", 性别: " +

        this.psex;

  }


  animalInfo() {

    return "动物信息: " + "种类: " + this.atype + ", 名称: " + this.aname;

  }

}


// 花朵类

class Flower {

  static String? fname;

  flowerInfo() {

    return "花朵信息: " + "名称: " + Flower.fname.toString();

  }

}


// 骑车类

class Car {

  static String cname = "";

  carInfo() {

    return "汽车信息: " + "名称: " + Car.cname;

  }

}


// 使用 with 关键字实现 mixins

class MixClass extends PersonAnimal with Flower, Car {

  // 访问修饰:私有修饰符

  num _privateNum = 10;


  // 常量构造函数属性必须通过final设置

  final String mname = "";

  final String mtype = "";


  // 属性

  late String pname;

  late int page;

  late String psex;

  late String atype;

  late String aname;

  late String fname;

  late String cname;


  // 构造方法

  MixClass([pname = ""]) {

    print("类-默认构造函数: MixClass");


    // 赋值

    this.pname = pname;

    print("类-默认构造函数-赋值: ${this.pname}");

  }


  // 命名构造函数:实现多个构造器

  MixClass.getPersonInfo(this.pname, this.page, this.psex) {

    print("类-命名构造函数-super(): ${super.personInfo()}");

  }


  // 常量构造函数,必须通过 const 声明

  // const MixClass(this.mname, this.mtype);


  // 方法

  run() {

    // 私有属性

    print("类-访问修饰-私有属性: ${this._privateNum}");


    // 获取汽车信息

    print(super.carInfo());

  }


  // Getter、Setter

  num get getPrivateNum {

    return this._privateNum;

  }


  void set setPrivateNum(number) {

    this._privateNum = number;

  }

}


Dart自定义库:libs/calculator.dart

// 自定义 calculator 库

library calculator;


import 'dart:math';


//import statement after the libaray statement

int add(int firstNumber, int secondNumber) {

  print("inside add method of Calculator Library ");

  return firstNumber + secondNumber;

}


int modulus(int firstNumber, int secondNumber) {

  print("inside modulus method of Calculator Library ");

  return firstNumber % secondNumber;

}


int random(int no) {

  return new Random().nextInt(no);

}


三、Flutter

官网:https://flutter.cn/

安装:https://flutter.cn/docs/get-started/install

基础命令:

        验证环境:flutter doctor

        查看设备:flutter devices

        升级:flutter upgrade

        创建项目:flutter create myapp

        运行项目:flutter run -d 设备ID

只袄早~~~
感谢你的支持,我会继续努力!
扫码打赏,感谢您的支持!

文明上网理性发言!