初识Flutter——Flutter七日游

2023-09-05 23:48:13

在 Flutter 中驾驭 Widget：StatelessWidget 和 StatefulWidget 的深入探讨

什么是 Widget？

在 Flutter 的世界中，一切皆为 Widget。Widget 是一个抽象类，定义了所有控件的公共接口。它们可以将应用程序的用户界面 (UI) 构建为由更小、可重用的组件组成的高度可定制的层次结构。

两种类型的 Widget：StatelessWidget 和 StatefulWidget

Flutter 主要区分两种类型的 Widget：StatelessWidget 和 StatefulWidget。让我们深入了解它们之间的区别：

StatelessWidget：不变的构建块

StatelessWidget 是一个不可变的 Widget，这意味着无论其输入如何变化，它的 build() 方法始终会返回相同的 Widget。它们通常用于表示静态内容，例如文本、图像和图标。它们不维护任何内部状态，因此在应用程序生命周期中保持不变。

代码示例：

import 'package:flutter/material.dart';

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

StatefulWidget：可变的 UI 元素

StatefulWidget 是一个可变的 Widget，这意味着它的 build() 方法可以根据其输入的变化返回不同的 Widget。它们通常用于表示动态内容，例如表单、列表和动画。它们维护内部状态，该状态可以在应用程序运行时发生变化。

代码示例：

import 'package:flutter/material.dart';

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Text('You have pushed the button this many times:'),
        Text(
          '$_counter',
          style: Theme.of(context).textTheme.headline4,
        ),
        ElevatedButton(
          onPressed: _incrementCounter,
          child: Text('Increment'),
        ),
      ],
    );
  }
}