dart 语言学习日记(2)

dart 语言学习日记(2)

前言

上一章节已经将 dart 的语法讲了一个大概，但是我个人认为还是缺少一点实践的内容

基于 Write your first Flutter app, 我想详细讲一讲其中的实现细节

核心知识点

• statelesswidget 以及其与 statefulwidget 的区别
• changenotifier
• 构造函数里的 require

主要内容

Widgets 概述

"everythin is widget"

首先，widget 是组成 flutter applications 的核心部分，在感官上看，widget 就是一个个的框，用于描述 ui 界面

一般来讲，每个 flutter 应用都需要定义一个 root widget , 在上文代码中，其 root widget 为 MyApp

而初始化一个组件，通常需要重写其 build 方法，所有的 widget 都需要 build 方法，并且返回另一个 widget

最常用的两个 widget 为 StatefulWidget 与 StatelessWidget 其的区别在于

• 当一个 widget 不会随用户操作而变化的时候，通常会使用 StatelessWidget
• 而当一个 widget 会随时变化时，则会使用 StatefulWidget

比如说，当定义一些按钮，图表或标题文本的时候，就会使用 StatelessWidget

而当需要根据用户操作或后台相应而变化的组件时，就会使用 StatefulWidget

flutter 布局

如上文所说，everything is widget , 意思就是在 Flutter 应用中几乎所有内容都是 widget , 比如说图片，文本，甚至是行，列，网格也是 widget

而通过各种简易组件的组合，就可以组成一个庞大复杂的组件甚至应用

图中的每个方框都代表一个 widget

组件约束条件

在 ui 界面的编写中，组件的位置，大小，往往是我们所关心的，在 flutter 中，组件的位置通常由其父组件所决定

1. 一个组件通常受其父组件影响
2. 这种影响的核心参数有4个，最小和最大宽度，最小和最大宽度，这些参数由父组件决定，并且可以通过诸如各类对齐属性控制其位置

box 对象

组件由 RenderBox 对象渲染，这种渲染方法与上文的约束条件相对应，如:

1. 如果想要组件越大越好，通常会使用 Center 以及 ListView
2. 如果父子组件想要用同一个尺寸，通常会使用 Transform 以及 Opacity

状态管理

概述

在 flutter 中，对象的管理一般通过 state 进行处理

当需要管理 flutter 应用的时候，就需要通过 state

其一般的用法为

1. 在各组件之间共享状态
2. 当状态改变的时候，使用 Listenable 来通知 app 内的各个组件
3. 使用 MVVM 组织各种状态变化

当 flutter 应用启动的时候，state 是存储与计算机内存中的，状态通常包括

1. app 里的数值
2. UI
3. 组件状态
4. 以及 app 内的绝大部分变量

所以 state 的定义我们可以理解为 重建 UI 所需要的任何数据

临时状态与全局状态

如上文定义，重建 app UI 的所有数据都叫 state, 那么从这些数据的用途角度，我们可以大致区分为 临时状态 与 全局状态 两大类

临时状态，也可称为 UI状态 与 局部状态, 比如说

1. 当前页 PageView
2. 当前进程的动画
3. 底部导航栏的 index

临时状态通常会使用 StatefulWidget 进行管理, 如:

class MyHomepage extends StatefulWidget {
  const MyHomepage({super.key});

  @override
  State<MyHomepage> createState() => _MyHomepageState();
}

class _MyHomepageState extends State<MyHomepage> {
  int _index = 0;

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      currentIndex: _index,
      onTap: (newIndex) {
        setState(() {
          _index = newIndex;
        });
      },
      // ... items ...
    );
  }
}

在上述代码中，有如下特点

1. 除了 MyHomepage 别的组件不需要 index 这个 state
2. 用户不介意 app 重启时 index 置为 0

在这种情况下，我们就该使用 StatefulWidget

全局状态

其用法区别于临时状态，当我们想要把状态在多个组件间，或者在多个 session 中共享时候，我们就该使用全局状态，如:

1. 登录信息
2. 用户偏好
3. 社交软件里的通知状态

在这种情况下就该使用全局状态

当然可能随着 app 的规模变大，某些临时状态可能会变成全局状态也不奇怪，这其中并没有特别严格的区分，只需要掌握下图的原则即可

在各组件间共享 state

上一个章节提到了 组件间共享状态 这个概念，首先明确在什么时候可能需要共享状态

1. 更新状态的同时需要通知别的组件
2. 需要根据 state 来变更 appUI

class MyCounter extends StatelessWidget {
  final int count;
  const MyCounter({super.key, required this.count});

  @override
  Widget build(BuildContext context) {
    return Text('$count');
  }
}

这种共享方式有点类似于将 state 以关联的方式注入类的构造函数中，这种方式一般称为依赖注入

而在 Write your first Flutter app 这个工程中

首先 MyHomepage 是主页面

那么通过 state 来控制页面

总结

该文更加详细的解释了 flutter 中是如何构建 UI 以及进行状态管理