flutter学习笔记

01 flutter3 环境搭建

最新版的flutter在进行环境搭建的时候需要额外安装Visual Studio，以对windows桌面版开发功能进行支持。可以在命令行中输入以下配置跳过这一步骤：

flutter config --no-enable-windows-desktop

02 flutter简要介绍

在Flutter中，大多数东西都是widget，包括对齐(alignment)、填充(padding)和布局(layout)
widget的主要工作是提供一个build()方法来描述如何根据其他较低级别的widget来显示自己。
使用外部包的方法：在pubspec.yaml中，将english_words（添加到依赖项列表，如下面高亮显示的

dependencies:
  flutter:
    sdk: flutter

  english_words: ^3.1.5

注意格式的对齐，然后点击上方Packages get，这会将依赖包安装到项目。然后再引入即可。

Flutter 从上到下可以分为三层：框架层、引擎层和嵌入层

Flutter 框架的的处理流程是这样的：

根据 Widget 树生成一个 Element 树，Element 树中的节点都继承自 Element 类。
根据 Element 树生成 Render 树（渲染树），渲染树中的节点都继承自RenderObject 类。
根据渲染树生成 Layer 树，然后上屏显示，Layer 树中的节点都继承自 Layer 类。
真正的布局和渲染逻辑在 Render 树中，Element 是 Widget 和 RenderObject 的粘合剂，可以理解为一个中间代理。
三棵树中，Widget 和 Element 是一一对应的，但并不和 RenderObject 一一对应。

json实体类自动生成工具：https://caijinglong.github.io/json2dart/index_ch.html
终端命令：

flutter packages pub run build_runner build

Flutter布局基础——Stack层叠布局

层叠布局适用于子视图叠放一起，且位置能够相对于父视图边界确认的情况。
比如，可用于图片上加文字，按钮上加渐变阴影等等。
Stack Widget的子视图要么是positioned，要么是non-positioned。Positioned子视图是指使用Positioned的widget包括起来的子视图，通过设置相对于Stack的top、bottom、left、right属性来确认自身位置，其中至少要有一个不为空。

Stack Widget的大小取决于所有non-positioned的子视图。non-positioned的子视图的位置根据alignment属性确定，(当alignment为left-to-right时，子视图默认从左上角开始；当aligment为right-to-left时，子视图从右上角开始；)。

Flutter中使用Stack和Positioned这两个组件来配合实现绝对定位。Stack允许子组件堆叠，而Positioned用于根据Stack的四个角来确定子组件的位置。

Dart——数据类型：键值对Map

map 是一个无序的 key-value （键值对）集合，其中键和值都可以是任何类型的对象。每个 键 只能出现一次但是 值 可以重复出现多次。 Dart 中 Map 提供了 Map 字面量以及 Map 类型两种形式的 Map。
使用 Map 的构造器创建 Map

var gifts = Map<String, String>();
gifts['first'] = 'partridge';
gifts['second'] = 'turtledoves';
gifts['fifth'] = 'golden rings';

向现有的 Map 中添加键值对

var gifts = {
   'first': 'partridge'};
gifts['fourth'] = 'calling birds';

从一个 Map 中获取一个值

var gifts = {
   'first': 'partridge'};
assert(gifts['first'] == 'partridge');

var nobleGases = {
   54: 'xenon'};

// Retrieve a value with a key.
assert(nobleGases[54] == 'xenon');

// Check whether a map contains a key.
assert(nobleGases.containsKey(54));

// Remove a key and its value.
nobleGases.remove(54);
assert(!nobleGases.containsKey(54));

可以从一个 map 中检索出所有的 key 或所有的 value：

var hawaiianBeaches = {
   
  'Oahu': ['Waikiki', 'Kailua', 'Waimanalo'],
  'Big Island': ['Wailea Bay', 'Pololu Beach'],
  'Kauai': ['Hanalei', 'Poipu']
};

// Get all the keys as an unordered collection
// (an Iterable).
var keys = hawaiianBeaches.keys;

assert(keys.length == 3);
assert(Set.from(keys).contains('Oahu'));

// Get all the values as an unordered collection
// (an Iterable of Lists).
var values = hawaiianBeaches.values;
assert(values.length == 3);
assert(values.any((v) => v.contains('Waikiki')));

使用 .length 可以获取 Map 中键值对的数量
在一个 Map 字面量前添加 const 关键字可以创建一个 Map 编译时常量

Dart——数据类型：泛型

• 适当地指定泛型可以更好地帮助代码生成。
• 使用泛型可以减少代码重复。

一个只能包含 String 类型的数组，可以将该数组声明为 List<String>（读作“字符串类型的 list”）

在flutter 项目中使用Hive进行数据本地存储

hive是一个高性能和轻量级的nosql数据库，使用键值对形式进行存储。

使用Hive的四个简单步骤：

Step 1 Setup Hive

• 在yaml文件下添加依赖

dependencies:
  flutter:
    sdk: flutter
  hive: ^2.0.4
  hive_flutter: ^1.1.0

dev_dependencies:
  flutter_test:
    sdk: flutter
  hive_generator: ^1.0.0
  build_runner: ^1.12.2 

• main.dart

// 1.
import 'package:hive/hive.dart';
import 'package:hive_flutter/hive_flutter.dart';

void main() async {
   

// 2.
  WidgetsFlutterBinding.ensureInitialized(); 
  // 初始化hive
  await Hive.initFlutter();
  
  runApp(MyApp());
}

Step 2 Create Hive Model

将想要进行本地存储的 model classes转化为 hive models.

• 创建一个模型类 lib/model/transaction.dart

class Transaction {
   
  late String name;

  late DateTime createdData;

  late bool isExpense = true;

  late double amount;
}
 

如果你想在你的配置单元数据库存储中进行存储和加载你的模型类，那么需要遵循三个步骤：

1. 修改模型类

// 1.
import 'package:hive/hive.dart';
// 这个文件是稍后生成的模拟类适配器
part 'transaction.g.dart';