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 框架的核心原理之一。