Flutter 面试题]什么是 Widget，有状态 Widget 和无状态 Widget 有什么区别？-补充说明

以下是两个示例，分别展示了如何使用 StatelessWidget 和 StatefulWidget 在 Flutter 中创建基本的用户界面。

StatelessWidget 示例

这个示例展示了一个简单的 StatelessWidget，它显示了一个文本消息。由于它是无状态的，所以这个 Widget 不会随时间改变。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

// 应用的根 Widget
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Stateless Widget 示例'),
        ),
        body: Center(
          // 自定义的 Stateless Widget
          child: MessageDisplay(),
        ),
      ),
    );
  }
}

// 一个简单的 Stateless Widget，显示固定文本
class MessageDisplay extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text(
      'Hello, Flutter!',
      style: TextStyle(fontSize: 24),
    );
  }
}

运行结果如下

StatefulWidget 示例

当然，这里有一个不同的 StatefulWidget 示例。这次我们将创建一个简单的计时器应用，当用户按下一个按钮时，计时器开始倒计时。这个例子展示了 StatefulWidget 如何用来响应用户的交互并更新界面。

import 'package:flutter/material.dart';
import 'dart:async';

void main() => runApp(MyApp());

// 应用的根 Widget
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('StatefulWidget 计时器示例 By 小雨青年 ****'),
        ),
        body: Center(
          // 自定义的 Stateful Widget 计时器
          child: TimerWidget(),
        ),
      ),
    );
  }
}

// 自定义的 Stateful Widget
class TimerWidget extends StatefulWidget {
  @override
  _TimerWidgetState createState() => _TimerWidgetState();
}

// TimerWidget 的状态
class _TimerWidgetState extends State<TimerWidget> {
  int _seconds = 10; // 倒计时的秒数
  Timer? _timer; // 用于控制倒计时的计时器

  void _startTimer() {
    _seconds = 10; // 重置计时时间
    if (_timer != null) {
      _timer!.cancel(); // 如果计时器已经存在，先取消当前计时器
    }
    // 创建一个新的计时器
    _timer = Timer.periodic(Duration(seconds: 1), (timer) {
      if (_seconds > 0) {
        setState(() {
          _seconds--; // 每秒钟减少秒数
        });
      } else {
        _timer!.cancel(); // 时间到达后取消计时器
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(
          '倒计时: $_seconds 秒',
          style: TextStyle(fontSize: 24),
        ),
        ElevatedButton(
          onPressed: _startTimer,
          child: Text('开始倒计时'),
        ),
      ],
    );
  }

  @override
  void dispose() {
    _timer?.cancel(); // 释放计时器资源
    super.dispose();
  }
}

运行结果如下

在这个例子中，我们定义了一个 _TimerWidgetState 类来管理计时器的状态，包括剩余秒数和计时器对象。_startTimer 方法用来初始化或重置计时器，并在每秒减少 _seconds 变量的值。当倒计时完成时，计时器会自动停止。这个例子展示了如何在 StatefulWidget 中处理时间相关的逻辑，并根据时间变化更新 UI。