widget

有状态widget

• 在新建的 dart 文件中输入 stful 后回车，IDE 会自动填写有状态的 widget 模板代码。
• 通过上面方法创建 widget 模板代码后在很多地方会显示红色波浪线，在代码 extends StatefulWidget { 处使用组合键 alt+enter，选择创建 material 类型的组件（android 风格的组件）后会在文件头自动添加一行代码 import 'package:flutter/material.dart'; 类似 java 开发时的自动导包

用途对应组件

• 页面 - 在上级组件的 child 属性中使用 Scaffold 作为组件页面的顶层容器

• 显示文本 - 使用组件 Text

• 容器组件 - 任何组件都可以使用容器组件 Container 包裹

• 颜色 - 有官方提供的 Colors 作为颜色常量使用

官方组件

Scaffold

用于构建 Material Design 风格页面的核心布局组件，提供标准、灵活配置的页面骨架，拥有以下主要属性

• appBar：页面顶部标题栏，通常用于显示标题、导航按钮和操作菜单

• body：页面的主要显示区域，用于放置其他组件

• bottomNavigationBar：底部导航栏，类似微信下面的4个导航菜单

• backgroundColor：设置整个 Scaffold 的背景色

• floatingActionButton：悬浮按钮，常用于当前页面的最主要操作，始终显示等待用户使用

自定义组件

概述

特性	无状态组件	有状态组件
核心特征	一旦创建，内部状态不可变 通过接受外部传入的参数（状态）展现不同状态 适合开发轮子（自定义组件），带有业务逻辑， 结合外部数据显示不同状态	在生命周期内可改变状态
使用场景	静态内容展示，一般由配置参数控制外观	交互式组件，有数据变动
生命周期	相对简单，主要是构建（build）	状态变化复杂，包含状态的创建、更新、销毁
代码结构	单个类	两个关联的类，Widget和相关的 State 类

有状态组件

创建过程 创建StatefulWidget组件 > createState > State对象创建 > initState > didChangeDependencies > build

更新过程 父组件重建 - 配置变更 > didUpdateWidget > build

销毁过程 组件被移除 > deactive > dispose

对于生命周期调用的方法功能作用如下

生命周期阶段	函数名	调用时机与核心任务
创建阶段	createState()	Widget初始化调用，创建 State 对象
	initState()	State对象插入Widget树，立刻执行，仅执行一次
	didChangeDependencies()	initState后立刻执行，当所依赖的InheritedWidget更新时调用，可能多次
构建与更新阶段	build()	构建UI的方法，初始化或更新后多次调用
	didUpdateWidget()	父组件传入新配置时调用，用于比较新旧配置
销毁阶段	deactiveate()	当State对象从树中暂时移除时调用
	dispose()	当State对象被永久移除时调用，释放资源，仅执行一次

InheritedWidget

专门用于在 widget 树中自顶向下高效的共享数据，顶层组件提供数据，子孙节点直接获取使用

无状态组件

所谓生命周期就是一个 build 函数，当创建该组件时调用一次，当父组件数据变动触发该子组件变更重绘则会再次调用该方法

• 创建一个文件 myStatless.dart ，继承 StatelessWidget 并实现 build 方法

• build 中返回一个 Widget

• 由于无状态， 主要用于展示型组件，一般没有用户交互