理解Compose状态与组合：从熟悉概念到轻松上手

2023-10-09 08:56:45

Compose：揭秘状态与组合的艺术

背景与初识

如果你之前接触过 Flutter，那么 "状态" 这一概念应该不会让你感到陌生。状态是一种在用户交互后会发生变化的数据类型。在构建用户界面时，状态决定了用户界面的外观和行为。在 Flutter 中，我们使用 StatefulWidget 来管理状态。StatefulWidget 包含一个 State 对象，其中包含状态变量。当状态变量发生改变时，State 对象会通知 Flutter，Flutter 则会重新构建用户界面。

现在，让我们把目光转向 Compose。Compose 是一种声明式的用户界面框架，与 Flutter 有着许多相似之处。Compose 同样有 "状态" 的概念，称为 State。State 对象包含与用户界面相关的数据。当 State 对象发生变化时，Compose 会自动更新用户界面。

从熟悉概念入手：数据与界面

Flutter 和 Compose 都使用状态来管理数据，它们都需要创建状态对象来存储数据。

状态：数据存储的载体

Flutter：StatefulWidget
Compose：State

组合：界面的构建方式

Flutter：组合组件
Compose：可组合函数

两者之间最大的区别在于，Compose 使用可组合函数来构建用户界面，而 Flutter 使用组合组件。可组合函数是纯函数，这意味着它们不会修改 State 对象。相反，它们接收 State 对象作为参数，并返回一个用户界面片段。

代码示例：

// Compose 中的可组合函数
@Composable
fun MyButton(onClick: () -> Unit, text: String) {
    Button(onClick = onClick) {
        Text(text)
    }
}

// Flutter 中的 StatefulWidget
class MyButton extends StatefulWidget {
  final VoidCallback onClick;
  final String text;

  const MyButton({required this.onClick, required this.text});

  @override
  _MyButtonState createState() => _MyButtonState();
}

class _MyButtonState extends State<MyButton> {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: widget.onClick,
      child: Text(widget.text),
    );
  }
}