Flutter 核心原理 - UI 框架（UI Framework）

Flutter 的 UI 框架基于组件(widget)的概念，其中每个组件都是一个 StatelessWidget 或者 StatefulWidget。

StatelessWidget 是不可变的，不会改变状态。这意味着它的 build 方法总是返回相同的结果。

StatefulWidget 可以在其生命周期内改变状态，这通过一个 State 对象来管理。每当 State 对象的 setState 方法被调用时，Flutter 就知道状态已经改变，并且需要重新构建 UI。

以下是一个简单的计数器示例，展示了如何创建一个 StatefulWidget 并在用户点击按钮时更新 UI。

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterPage(),
    );
  }
}
 
class CounterPage extends StatefulWidget {
  @override
  _CounterPageState createState() => _CounterPageState();
}
 
class _CounterPageState extends State<CounterPage> {
  int _counter = 0;
 
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Counter App'),
      ),
      body: Center(
        child: Text(
          '$_counter',
          style: Theme.of(context).textTheme.headline4,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

在这个例子中，CounterPage 是一个 StatefulWidget，它有一个关联的 _CounterPageState 类，它管理着计数器的状态。当用户点击浮动动作按钮时，_incrementCounter 方法被调用，这导致计数器的值增加，并通过 setState 方法触发 UI 重新构建。这个过程是 Flutter 中 UI 框架的核心原理之一。