Flutter万物皆为Widget

Flutter 中的 Widget 是描述界面元素的基本单元，可以包含视觉和交互元素。Widget 可以嵌套、组合和扩展，从而构建出复杂的 UI 界面。在 Flutter 中，Widget 可以分为两种类型：StatelessWidget 和 StatefulWidget。

• StatelessWidget：无状态 Widget，它们的状态不会改变，只能通过父 Widget 传递参数来更新 UI。StatelessWidget 继承自 StatelessWidget 类。
• StatefulWidget：有状态 Widget，它们的状态可以改变，并且可以自行通知 Flutter 框架更新 UI。StatefulWidget 继承自 StatefulWidget 类，同时包括一个对应的 State 对象。

下面是 StatelessWidget 和 StatefulWidget 的区别：

1. 基本概念：StatelessWidget 表示不可变的 Widget，因此它的属性一旦被创建就无法再次更改；StatefulWidget 表示可变的 Widget，它拥有内部状态，可以随时更改这些状态。

2. 局限性：StatelessWidget 适用于那些不需要改变的场景，比如展示静态内容的页面；StatefulWidget 适用于那些需要根据用户操作或其他事件动态改变界面的场景，比如表单输入等。

3. 开销：由于不需要维护内部状态，StatelessWidget 相对于 StatefulWidget 具有更低的开销和更高的性能。

4. 代码结构：StatelessWidget 非常适合简单的 UI 元素，而 StatefulWidget 则需要更多的代码结构来管理状态和更新 UI。

以下是 StatelessWidget 的示例代码：

class MyWidget extends StatelessWidget {
  final String text;

  const MyWidget({Key? key, required this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(text);
  }
}

以下是 StatefulWidget 的示例代码：

class MyWidget extends StatefulWidget {
  final String text;

  const MyWidget({Key? key, required this.text}) : super(key: key);

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

class _MyWidgetState extends State<MyWidget> {
  bool _isPressed = false;

  void _onButtonPressed() {
    setState(() {
      _isPressed = !_isPressed;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(widget.text),
        ElevatedButton(
          onPressed: _onButtonPressed,
          child: Text(_isPressed ? 'Pressed' : 'Not Pressed'),
        ),
      ],
    );
  }
}

在上述代码中，StatefulWidget 包含一个名为 _isPressed 的内部状态，当用户按下按钮时会切换该状态，并通过 setState() 方法通知 Flutter 框架更新 UI。通过这种方式，可以实现动态修改界面元素的效果。

总之，StatelessWidget 和 StatefulWidget 是 Flutter 中非常重要的概念，开发时候需要理解它们的区别和使用场景，以便编写高效、可维护的 Flutter 应用程序。