我正在学习Flutter，并试图弄清楚如何提升状态并按条件渲染内容。

在使用 Widget? 来声明 activeScreen 时，我在 build 方法上遇到了一个问题。

错误信息如下：

类型为 'Widget?' 的值不能从方法 'build' 返回，因为它的返回类型是 'Widget'。

我这里到底缺少了什么？我的代码库如下：

import 'package:adv_basics/home_screen.dart';
import 'package:adv_basics/questions_screen.dart';
import 'package:flutter/material.dart';

class QuizPage extends StatefulWidget {
  const QuizPage({super.key});
  @override
  State<QuizPage> createState() {
    return _QuizPageState();
  }
}

class _QuizPageState extends State<QuizPage> {
  Widget? activeScreen;
  @override
  void initState() {
    super.initState();
    activeScreen = HomeScreen(switchScreen);
  }

  void switchScreen() {
    setState(() {
      activeScreen = const QuestionsScreen();
    });
  }

  @override
  Widget build(context) {
    return activeScreen;
  }
}

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen(this.startQuiz, {super.key});

  final void Function() startQuiz;

  void onPressed() {
    //Do Something
  }

  @override
  Widget build(context) {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [
            const Color.fromARGB(255, 90, 34, 185),
            const Color.fromARGB(255, 150, 130, 185),
          ],
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
        ),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Image.asset(
            'assets/images/quiz-logo.png',
            width: 300,
            color: const Color.fromARGB(154, 255, 255, 255),
          ),
          Center(
            child: Text(
              'Learn Flutter the fun way!',
              style: TextStyle(
                color: Colors.white,
                fontSize: 24,
              ),
            ),
          ),
          Center(
            child: OutlinedButton.icon(
              onPressed: startQuiz,
              style: OutlinedButton.styleFrom(
                foregroundColor: Colors.white,
                side: BorderSide(
                  color: Color.fromARGB(255, 96, 41, 190),
                ),
                shape: BeveledRectangleBorder(),
              ),
              icon: const Icon(Icons.arrow_right_alt),
              label: const Text(
                'Start Quiz',
              ),
            ),
          ),
        ],
      ),
    );
  }
}

解决方案

按定义，build 方法 必须返回一个 Widget，它不能返回 null。

但在你的代码中，你有：

Widget build(context) {
  return activeScreen;
}

而 activeScreen 被声明为：

Widget? activeScreen;

所以 activeScreen 可能是 null，这在作为 build 的返回值时是不被允许的。

最简单的修复方法，是将 activeScreen 标记为 late：

late Widget activeScreen;

通过 将字段标记为 late，你表示它初始时可能是 null，但你保证在首次读取它之前会给它赋值。