Flutter入门: Stateless Widget和Stateful Widget详解

Flutter 中的 Stateless Widget 和 Stateful Widget

在 Flutter 的世界中，Widget 扮演着至关重要的角色，它是应用程序 UI 的基本构建块，每个 Widget 代表着屏幕上的一个元素。Widget 的类型可分为两大类：Stateless Widget 和 Stateful Widget。

Stateless Widget

Stateless Widget 是一款轻量级的 Widget，不包含任何状态信息。一旦创建了 Stateless Widget，它的状态便会一成不变。通常情况下，它被用来构建应用程序中无需改变状态的元素，例如文本、图标和按钮。

代码示例：

import 'package:flutter/material.dart';

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

Stateful Widget

与 Stateless Widget 不同，Stateful Widget 更加复杂，因为它可以包含状态信息。这意味着，随着时间的推移，Stateful Widget 的状态可以发生改变。它通常用于构建应用程序中需要改变状态的元素，例如表单、列表和计数器。

代码示例：

import 'package:flutter/material.dart';

class MyCounterWidget extends StatefulWidget {
  @override
  _MyCounterWidgetState createState() => _MyCounterWidgetState();
}

class _MyCounterWidgetState extends State<MyCounterWidget> {
  int _count = 0;

  void incrementCounter() {
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Text('Count: $_count'),
        RaisedButton(
          onPressed: incrementCounter,
          child: Text('Increment'),
        ),
      ],
    );
  }
}

基础类 Widget

Flutter 提供了一系列基础类 Widget，可以助你快速搭建应用程序的 UI。这些 Widget 包括：

• Container： 一个容器 Widget，可包含其他 Widget，并可设置颜色、边框、内边距等属性。
• Text： 显示文本的 Widget，可设置字体、颜色、大小等属性。
• Button： 响应用户点击事件的 Widget，可设置文本、颜色、背景色等属性。
• Image： 显示图像的 Widget，可设置图像路径、大小等属性。
• ListView： 显示一组项目的 Widget，可设置滚动方向、项目大小等属性。

总结

掌握了 Flutter 中的 Stateless Widget 和 Stateful Widget，你将深入了解其 UI 构建和状态管理机制。基础类 Widget 的运用，能让你快速搭建应用程序的 UI。运用自如，定能挥洒自如，构建出丰富多彩的 Flutter 应用。

常见问题解答

1. Stateless Widget 和 Stateful Widget 的区别是什么？
   • Stateless Widget 不包含状态信息，其状态不可变；Stateful Widget 则包含状态信息，其状态可以随着时间的推移而改变。
2. 何时使用 Stateless Widget？
   • 当构建应用程序中无需改变状态的元素时，例如文本、图标和按钮。
3. 何时使用 Stateful Widget？
   • 当构建应用程序中需要改变状态的元素时，例如表单、列表和计数器。
4. 如何使用基础类 Widget？
   • 继承自相应的基础类 Widget，并设置所需的属性即可。
5. Flutter 中的常见 Widget 类型有哪些？
   • Container、Text、Button、Image、ListView 等。