Flutter基础
搭建 flutter 开发环境
诊断 flutter 环境
flutter doctor -v
使用命令创建 flutter 工程
# flutter create --platform web <项目名称>
启用 flutter web 支持
flutter config --enable-web
检查可用设备
flutter devices
运行 flutter 项目到 edge 浏览器平台
flutter run -d edge
# 热重载
r
解释 flutter 的 super.key
- 可以将父类(StatelessWidget)看成一个通用的“建筑模板”, 子类(MyWidget)是你根据模板盖出的“具体大楼”. Key 就是这栋楼的“门牌号”.当你写 super.key 时, 只是在说:“请给我的这栋新楼贴上门牌号,并登记在建筑总局(父类)的档案里.” 它不会改变大楼的外观, 只是为了让 Flutter 引擎在更新界面时能通过这个“门牌号”快速找到这栋楼.
解释 flutter 的 build 函数
- build 函数是 flutter 的 “界面工厂”, 它的作用是: 根据当前的状态返回一个新的 Widget 树.
- 每当状态变化(setState),父组件更新,窗口尺寸变化时,flutter 都会重新调用 build 来 “重置界面”.
解释 flutter 项目的 pubspec.yaml 文件
- pubspec.yaml 是 Flutter 项目中最重要的配置文件之一,用于管理项目的包依赖、资源、版本信息、环境要求等。它相当于 Flutter 应用的“项目说明书”.
解释 flutter 项目的 child 和 children
- child: 只能放一个 Widget,适用于只能包含一个内容的布局组件.
- children: 放多个 Widget(列表),适用于可以包含多个子组件的布局组件.
解释 flutter 项目的 StatelessWidget 和 StatefulWidget
StatelessWidget(无状态组件)
- StatelessWidget 最大的特点是不可变性.这意味着一旦一个 StatelessWidget 被创建, 它的属性(如文本内容、颜色、尺寸等)就无法在内部被修改.它没有内部可变状态, 其 UI 在渲染完成后就不会再自行改变, 就像一张打印好的照片一样,始终保持静态.
- StatelessWidget 的生命周期非常简单.它只有一个核心方法 —— build(BuildContext context).
作用:build 方法负责根据当前传入的配置信息(构造函数参数)来绘制和返回 UI 界面.
触发时机:该方法通常在 Widget 初始化时被调用。此外,如果它的父级 Widget 发生了重建,StatelessWidget 也会随之重建.
StatefulWidget(有状态组件)
- StatefulWidget 是构建动态交互界面的核心基础组件.它专门用于描述那些需要持有一些可变状态、并根据用户输入或数据变化来动态更新 UI 的界面片段.
- StatefulWidget 本身依然是不可变的,但它知道如何生成一个 State 对象.State 对象才是真正保存可变信息(如计数器数值、输入框文本、动画状态等)的载体.这种分离是因为两者的生命周期不同:Widget 是临时对象,用于构建应用在某一状态下的呈现;而 State 对象则在多次调用 build() 之间保持存在,从而能记住信息.
- StatefulWidget 的实现通常需要创建两个类:一个 StatefulWidget 子类和一个 State 子类。其核心生命周期如下:
- createState():当 StatefulWidget 被插入到 Widget 树中时,框架会调用此方法来创建一个新的 State 对象.
- initState():State 对象创建并关联到 BuildContext 后,框架会调用此方法,用于执行依赖于上下文或 widget 的一次性初始化.
- build():该方法位于 State 类中.当 State 对象完全初始化后,框架会调用 build 方法来获取 UI 描述。只要状态发生变化,build 就会被重新调用.
- didUpdateWidget():当父级 Widget 重建并传入了一个新的 StatefulWidget 实例时,框架会更新 State 的 widget 属性并调用此方法,以便 State 响应配置的变化.
- dispose():当包含该 State 对象的子树被永久从树中移除时,框架会调用此方法。开发者应在此方法中释放对象保留的任何资源(如停止动画、取消订阅等)。
- setState(): 修改 State 中的数据后, 必须调用 setState(() {}) 方法. 这会通知 Flutter 框架“内部状态已发生变化,可能会影响用户界面”,框架随后会将该 State 标记为“脏状态”,并触发 build 方法重新构建 UI 树,从而更新屏幕显示.