Flutter 核心知识点笔记#

1. 核心机制#

• StatefulWidget：组件本身是不可变的，它通过 createState() 创建一个 State 对象。
• State 对象：存储组件的可变数据（如代码中的 count），并负责构建 UI。
• setState()：通知框架“状态已更改”的关键方法。调用后，Flutter 会将该组件标记为“脏”（dirty），并在下一帧触发 build 方法重新运行，从而根据新数据渲染界面。

2. 代码中的具体应用#

• 数据定义：int count = 0;（定义在 State 类中）。
• 状态触发示例：

1
onPressed: () {
2
  count++; // 1. 修改变量值
3
  setState(() {}); // 2. 触发 UI 刷新
4
}

注意：setState 内部通常包裹修改逻辑（如 setState(() => count++)）。但即使是空回调，只要调用了它，当前 Widget 及其子树就会重新构建。

1. 基础布局属性#

2. BoxDecoration 装饰器#

decoration 属性允许我们美化容器。

注意：一旦使用了 decoration，Container 自身的 color 属性必须移除。

• color：背景颜色（如 Colors.blue）。
• borderRadius：设置圆角（BorderRadius.circular(15.0)）。
• border：设置边框颜色和宽度（Border.all(color: Colors.amber, width: 3.0)）。

1. 常用属性#

2. 基础示例#

1
Scaffold(
2
  appBar: AppBar(
3
    title: const Text('Scaffold 示例'),
4
  ),
5
  body: const Center(
6
    child: Text('页面内容区域'),
7
  ),
8
  floatingActionButton: FloatingActionButton(
9
    onPressed: () {
10
      // 点击后执行主要操作
11
    },
12
    child: const Icon(Icons.add),
13
  ),
14
)

3. 使用建议#

• 一个页面通常对应一个 Scaffold。
• 如果页面已经有外层 Scaffold，子组件中一般不再重复嵌套，避免布局和返回行为混乱。
• 需要显示提示条时，可结合 ScaffoldMessenger 使用 SnackBar。

1. Align 放在 Container 内部#

结构：Container -> Align -> Child

• 谁决定位置：Align 决定子组件（Child）在 Container 内部的位置。
• Container 的表现：大小由自身 width、height 或父组件约束决定。
• 实际效果：Container 像一个固定画框，Align 只是在画框内部移动内容。
• 注意：不会改变 Container 自身在屏幕中的位置。

1
Container(
2
  width: 200,
3
  height: 200,
4
  color: Colors.blue,
5
  child: Align(
6
    alignment: Alignment.bottomRight,
7
    child: Text("我在内部"),
8
  ),
9
)

2. Container 放在 Align 内部#

结构：Align -> Container -> Child

• 谁决定位置：Align 决定整个 Container 在父级空间中的位置。
• Align 的表现：通常占据父组件可用空间，再按 alignment 摆放子组件。
• 实际效果：Align 充当“定位员”，可解决 Container 默认靠左上角的问题。

1
Align(
2
  alignment: Alignment.center,
3
  child: Container(
4
    width: 200,
5
    height: 200,
6
    color: Colors.blue,
7
    child: Text("我在中间"),
8
  ),
9
)

3. 核心区别对比#

4. 特殊情况：Container 的 alignment 属性#

Container 内部已经集成了类似 Align 的逻辑。示例：

1
Container(
2
  alignment: Alignment.center,
3
  child: Text("Hello"),
4
)

这在逻辑上等同于“将 Align 放在 Container 内部”。 它只会让文字在容器中居中，不会让容器在页面中居中。

5. 总结建议#

• 想让“盒子里的内容”换位置：把 Align 放在 Container 里，或直接使用 Container.alignment。
• 想让“整个盒子”换位置：把 Container 放在 Align 里。

1. 核心属性#

• padding：接收 EdgeInsetsGeometry 类型。
• 常见写法：
  • EdgeInsets.all(10.0)：四周相等。
  • EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0)：水平和垂直对称。
  • EdgeInsets.only(left: 10, top: 5)：指定单边。
  • EdgeInsets.fromLTRB(left, top, right, bottom)：按左上右下设置。

2. 知识点#

• Padding 是单一职责组件，只负责间距，通常比通用 Container 更轻量。
• 需要多层间距时，可嵌套多个 Padding。

3. 案例代码与实际效果#

1
Container(
2
  color: Colors.grey.shade300,
3
  child: Padding(
4
    padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),//横向和纵向
5
    child: Container(
6
      color: Colors.blue,
7
      child: const Text(
8
        '有内边距的文本',
9
        style: TextStyle(color: Colors.white),
10
      ),
11
    ),
12
  ),
13
)

实际效果：蓝色内容块不会贴着灰色边缘，而是与四周保持稳定留白，视觉更舒展。

1. 核心属性#

2. 常见主轴对齐值#

• MainAxisAlignment.start：起点对齐。
• MainAxisAlignment.center：居中。
• MainAxisAlignment.end：终点对齐。
• MainAxisAlignment.spaceBetween：两端贴边，中间均匀分隔。
• MainAxisAlignment.spaceAround：每个子项两侧间距相等。
• MainAxisAlignment.spaceEvenly：所有间距（含两端）完全相等。

3. 案例代码与实际效果#

1
Row(
2
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
3
  children: const [
4
    Icon(Icons.home, size: 32),
5
    Icon(Icons.search, size: 32),
6
    Icon(Icons.person, size: 32),
7
  ],
8
)

实际效果：三个图标在一行中平均分布，左右留白与图标间距保持一致。

1. 核心属性#

• direction：必填。
  • Axis.horizontal 等同于 Row。
  • Axis.vertical 等同于 Column。

2. 配合组件：Expanded 与 Flexible#

• Expanded：强制子项填满主轴剩余空间。
• Flexible：允许子项参与弹性分配，但不强制填满。
• flex：分配权重，默认是 1。

3. 案例代码与实际效果#

1
Flex(
2
  direction: Axis.horizontal,
3
  children: [
4
    Expanded(
5
      flex: 2,
6
      child: Container(height: 60, color: Colors.red),
7
    ),
8
    Expanded(
9
      flex: 1,
10
      child: Container(height: 60, color: Colors.green),
11
    ),
12
  ],
13
)

实际效果：红色与绿色区域按 2:1 分配宽度，红色区域约为绿色的两倍。

1. 核心属性#

• direction：排列方向，默认 Axis.horizontal。
• spacing：主轴方向子项间距。
• runSpacing：换行后行与行之间间距。
• alignment：每一行在主轴上的对齐方式。
• runAlignment：多行整体在交叉轴上的对齐方式。

2. 知识点#

• 组件数量不确定时（如标签云、筛选项），优先考虑 Wrap。
• 相比 Row，Wrap 能在小屏设备上更自然适配。

3. 案例代码与实际效果#

1
Wrap(
2
  spacing: 8,
3
  runSpacing: 8,
4
  children: [
5
    for (final tag in ['Flutter', 'Dart', '状态管理', '布局', '动画', '网络'])
6
      Chip(label: Text(tag)),
7
  ],
8
)

实际效果：标签在一行放不下时会自动换到下一行，避免右侧溢出报错。

1. setState 调用了但界面没更新#

• 常见原因：修改的变量不在当前 State 中，或 UI 没有使用该变量。
• 解决建议：确认“数据定义位置”和“build 中是否读取该数据”。

2. Container 设置了 decoration 又设置 color#

• 常见原因：同一层同时设置 decoration 和 color。
• 解决建议：颜色放到 BoxDecoration(color: ...) 中，不再单独写 color。

3. Row 子项过多出现黄色黑纹溢出#

• 常见原因：Row 不会自动换行。
• 解决建议：改用 Wrap，或配合 Expanded/Flexible 做弹性压缩。

4. 以为 Container(alignment: ...) 能移动整个容器#

• 常见原因：混淆“内容对齐”和“组件定位”。
• 解决建议：Container.alignment 只影响子组件；要移动整个容器，使用外层 Align。

1. 核心属性#

2. 配合组件：Positioned#

在 Stack 中，通常使用 Positioned 精确控制子组件位置。

• 常用属性：top、bottom、left、right、width、height。
• 关键点：一旦子组件被 Positioned 包裹，它会变成“定位组件”，不再受 Stack.alignment 影响。

3. 案例代码与实际效果#

1
Stack(
2
  children: [
3
    Container(
4
      width: 220,
5
      height: 120,
6
      decoration: BoxDecoration(
7
        color: Colors.blue.shade100,
8
        borderRadius: BorderRadius.circular(12),
9
      ),
10
    ),
11
    Positioned(
12
      top: 8,
13
      right: 8,
14
      child: Container(
15
        padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
16
        decoration: BoxDecoration(
17
          color: Colors.red,
18
          borderRadius: BorderRadius.circular(10),
19
        ),
20
        child: const Text('NEW', style: TextStyle(color: Colors.white)),
21
      ),
22
    ),
23
  ],
24
)

实际效果：蓝色卡片右上角叠加一个红色角标，常用于消息数量、活动状态等提示场景。

1. 核心属性#

2. TextStyle 常用配置#

• color：文本颜色。
• fontSize：字号。
• fontWeight：字重，如 FontWeight.bold。
• fontStyle：斜体，如 FontStyle.italic。
• letterSpacing：字间距。
• height：行高倍数，例如 height: 1.5。

3. 案例代码与实际效果#

1
const Text(
2
  '这是一段很长的说明文字，超出两行后会显示省略号，避免破坏列表布局。',
3
  maxLines: 2,
4
  overflow: TextOverflow.ellipsis,
5
  style: TextStyle(fontSize: 14, height: 1.4),
6
)

实际效果：文本最多显示两行，第三行内容被省略，适合卡片列表和新闻摘要场景。

1. 核心结构#

• TextSpan 不是组件（Widget），而是文本片段描述对象。
• 通过 children 形成树形结构，子片段会继承父级样式。

1
Text.rich(
2
  TextSpan(
3
    text: '同意并继续：',
4
    style: const TextStyle(color: Colors.black87),
5
    children: [
6
      TextSpan(
7
        text: '《用户协议》',
8
        style: const TextStyle(
9
          color: Colors.blue,
10
          fontWeight: FontWeight.bold,
11
          decoration: TextDecoration.underline,
12
        ),
13
      ),
14
      const TextSpan(text: ' 与 '),
15
      TextSpan(
16
        text: '《隐私政策》',
17
        style: const TextStyle(
18
          color: Colors.blue,
19
          fontWeight: FontWeight.bold,
20
          decoration: TextDecoration.underline,
21
        ),
22
      ),
23
    ],
24
  ),
25
)

2. 常用属性速查#

3. 点击事件注意点#

• 使用 TapGestureRecognizer 时，若在 StatefulWidget 中长期持有，需要在 dispose 中释放，避免内存泄漏。
• 对可点击文本建议增加视觉提示（颜色、下划线），提高可用性。

4. 适用场景建议#

• 协议勾选说明（如“同意《用户协议》”）。
• 价格文本（如“原价 + 现价”不同样式）。
• 关键词高亮（搜索结果关键字着色）。