今天是周末，大好春光，在此学习新框架，加速公司的各种软件上线使用，原来使用qt c++框架，目前来看，在移动端不大好用，完不成公司的需求，采用新的flutter框架，加速学习，同时在桌面软件与WEB后台软件中，也能解决问题，不用学习html 5那一套了。

学习flutter过程中，并不难，保持所见即所得的学习方法，上手调试源代码，通过调整一些代码，观察调整后的效果，加速理解框架的使用。

一界面效果

点一次鼠标，里面计数加1，同时颜色变换一次，效果很简单，主要是学习StatefulWidget使用方法。

二代码实现

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

// 父组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('StatefulWidget学习例子')),
        body: Center(child: ColorToggleBox()),
      ),
    );
  }
}

// 自定义的 StatefulWidget
class ColorToggleBox extends StatefulWidget {
  @override
  _ColorToggleBoxState createState() => _ColorToggleBoxState();
}

// 对应的状态管理类
class _ColorToggleBoxState extends State<ColorToggleBox> {
  // 状态变量1：颜色值
  Color _boxColor = Colors.blue;
  
  // 状态变量2：点击计数器
  int _clickCount = 0;

  // 状态更新方法
  void _changeColor() {
    setState(() { // 必须包裹在setState中
      _boxColor = _boxColor == Colors.blue ? Colors.red : Colors.blue;
      _clickCount++;
    });
  }

  // 生命周期方法：初始化状态
  @override
  void initState() {
    super.initState(); // 必须调用父类方法
    print('组件初始化');
  }

  // 生命周期方法：组件销毁
  @override
  void dispose() {
    super.dispose();
    print('组件销毁');
  }

  // 构建UI
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _changeColor,
      child: Container(
        width: 200,
        height: 200,
        decoration: BoxDecoration(
          color: _boxColor,
          borderRadius: BorderRadius.circular(12),
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(Icons.touch_app, size: 40, color: Colors.white),
            Text('点击次数: $_clickCount', 
                 style: TextStyle(color: Colors.white)),
          ],
        ),
      ),
    );
  }
}

三代码讲解

1. 组件结构

dart

class MyWidget extends StatefulWidget { // 不可变外壳
  @override
  _MyWidgetState createState() => _MyWidgetState(); // 创建状态对象
}

class _MyWidgetState extends State<MyWidget> { // 可变状态管理
  // 状态变量...
  
  @override
  Widget build(BuildContext context) { ... }
}

StatefulWidget 本身不可变，仅作为配置载体
_MyWidgetState 类持有可变状态，负责UI构建

2. 状态管理

状态变量：使用类成员变量存储（如 _boxColor）
setState()：触发UI重建的关键方法
dart
复制
markdown
复制
setState(() { _boxColor = newColor; // 修改状态变量 });
更新机制：调用 setState → 触发 build 方法 → 生成新Widget树

3. 生命周期方法

方法	调用时机	典型用途
initState	插入Widget树时（只调用一次）	初始化数据、订阅事件
didUpdateWidget	父组件重建导致Widget配置变化时	响应配置变化
build	需要构建UI时	返回Widget树
dispose	组件从树中永久移除时	释放资源、取消订阅

4. 最佳实践

状态私有化：使用 _variable 命名保持私有
不可变原则：StatefulWidget的属性应声明为 final
性能优化：避免在 build 中创建大型对象
状态分离：复杂场景使用Provider/Riverpod等状态管理方案

5. 关键区别

	StatelessWidget	StatefulWidget
状态存储	无	通过State对象持有
重建方式	完全重新创建	复用State对象，仅重建Widget树
使用场景	静态内容	动态交互内容

常见问题指南

Q1: 为什么需要两个类？

A: 遵循 关注点分离 原则：

Widget类：描述如何配置组件
State类：管理动态数据和构建逻辑

Q2: setState不生效？

检查点：

是否遗漏了 setState 调用
是否直接修改了状态变量而没有重新赋值
dart
复制
dart
复制
// 错误方式（直接修改对象内部状态） _myList.add(item); // 正确方式（创建新对象） _myList = [..._myList, item];

Q3: 如何传递初始值？

通过Widget构造函数：

dart

class ColorToggleBox extends StatefulWidget {
  final Color initialColor; // 接收初始值
  
  ColorToggleBox({this.initialColor = Colors.blue});
  
  @override
  _ColorToggleBoxState createState() => _ColorToggleBoxState();
}

// 在State类中通过widget.访问
@override
void initState() {
  _boxColor = widget.initialColor; 
}

运行效果

点击彩色方块会切换颜色
计数器显示点击次数
控制台输出生命周期日志

通过这个示例，你可以直观理解Flutter的 响应式编程模型 和 状态驱动UI 的核心思想。建议修改状态变量（如添加更多交互逻辑）来加深理解。

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

flutter软件开发笔记05-StatefulWidget组件的使用方法