📅  最后修改于: 2023-12-03 14:50:15.858000             🧑  作者: Mango
在 Dart 编程语言中,小部件(widget)是构建用户界面的基本单位。小部件可以是有状态的(Stateful)或无状态的(Stateless)。有状态小部件指的是在使用过程中它的状态是可变的,可以通过改变其属性或方法来更改其状态。相比之下,无状态小部件则不可以改变。
首先,我们需要导入 material 包,因为在本例中我们将使用 Material Design 风格的部件,然后创建一个继承自 StatefulWidget 的小部件。
import 'package:flutter/material.dart';
class MyStatefulWidget extends StatefulWidget {
const MyStatefulWidget({Key? key}) : super(key: key);
@override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
注意,我们需要实现 createState 方法并返回一个新的 State 对象。
接下来,我们需要创建一个继承自 State 的状态对象。在这个对象中,我们可以定义需要被改变的状态属性和方法。
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('My Stateful Widget'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pressed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}
在这个例子中,我们创建了一个 _counter 变量和一个 _incrementCounter 方法。在 _incrementCounter 中,我们使用 setState 方法来更新 _counter 变量的值。setState 是必需的,因为它通知 Flutter 框架对小部件进行重绘。
最后,在 build 方法中,我们使用 Scaffold、AppBar 和 FloatingActionButton 等 Material Design 部件来构建用户界面。我们还在 Text 中使用了 _counter 变量的值。
有状态小部件可以在使用过程中改变状态,一般用于处理用户交互或其他需要动态更新的场景。通过实现 createState 和 State 中的 build 方法,我们可以创建自己的有状态小部件。