Flutter UI布局之StatelessWidget与StatefulWidget详解

2023-09-20 00:28:24

Flutter是一款开源的移动应用开发框架，它可以让开发者使用单一的代码库构建出适用于iOS、Android和Web的应用。Flutter的UI布局系统基于Widget，Widget是一种特殊的类，它可以UI元素的外观和行为。

在Flutter中，Widget分为两种类型：StatelessWidget和StatefulWidget。StatelessWidget是不可变的，这意味着它在创建后就不能再改变其状态。StatefulWidget是可变的，这意味着它可以在创建后改变其状态。

StatelessWidget

StatelessWidget是Flutter中最为基础的Widget类型。它通常用于创建简单的、不需要改变状态的UI元素。例如，一个Text Widget就是一个StatelessWidget，它只能显示一段文本，而不能改变文本的内容。

StatelessWidget的创建非常简单，只需要创建一个继承自StatelessWidget类的类，然后重写build()方法即可。build()方法返回一个Widget对象，该对象了StatelessWidget的外观和行为。

以下是一个创建Text Widget的示例：

class MyText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello, world!');
  }
}

StatefulWidget

StatefulWidget是Flutter中另一种常用的Widget类型。它通常用于创建动态的、需要改变状态的UI元素。例如，一个TextField Widget就是一个StatefulWidget，它可以允许用户输入文本，并可以实时更新文本的内容。

StatefulWidget的创建要比StatelessWidget复杂一些。首先，你需要创建一个继承自StatefulWidget类的类，然后重写createState()方法。createState()方法返回一个State对象，该对象负责管理StatefulWidget的状态。

以下是一个创建TextField Widget的示例：

class MyTextField extends StatefulWidget {
  @override
  State<MyTextField> createState() => _MyTextFieldState();
}

class _MyTextFieldState extends State<MyTextField> {
  String text = '';

  @override
  Widget build(BuildContext context) {
    return TextField(
      onChanged: (value) {
        setState(() {
          text = value;
        });
      },
      decoration: InputDecoration(
        hintText: 'Enter some text',
      ),
    );
  }
}