Flutter：返回类型 Widget？不是小部件答案

【问题标题】：Flutter: Return type Widget? isn't a WidgetFlutter：返回类型 Widget？不是小部件
【发布时间】：2021-09-11 00:47:29
【问题描述】：

我有这段代码，它给了我很多空安全错误：

import 'package:flutter/material.dart';

const int largeScreenSize = 1366;
const int mediumScreenSize = 768;
const int smallScreenSize = 360;
const int customScreenSize = 1100;

class ResponsiveWidget extends StatelessWidget {
  final Widget? largeScreen;
  final Widget? mediumScreen;
  final Widget? smallScreen;

  const ResponsiveWidget({
    Key? key,
    @required this.largeScreen,
    this.mediumScreen,
    this.smallScreen,
  }) : super(key: key);

在build 中，我正在使用LayoutBuilder，如下所示：

return LayoutBuilder(
      builder: (context, constraints) {
        double _width = constraints.maxWidth;
        if (_width > largeScreenSize) {
          return largeScreen;
        } else if (_width < largeScreenSize && _width >= mediumScreenSize) {
          return mediumScreen ?? largeScreen;
        } else {
          return smallScreen ?? largeScreen;
        }
      },
    );

但是所有的屏幕引用都报错：

返回类型 'Widget?'不是闭包上下文所要求的“小部件”。

因此，如果我删除 ? 并使小部件 largeScreen、mediumScreen、smallScreen 不可为空，那么在构造函数中会出现错误：

参数 'largeScreen' 的值不能为 'null'，因为它的类型，但隐含的默认值是 'null'。尝试添加显式的非“null”默认值或“required”修饰符。

所以 null 或 not null，我在这两种情况下都会出错。

【问题讨论】：

您是否尝试替换 builder :(context with create 。参考：stackoverflow.com/questions/64182682/…
@Muhtar 它说The named parameter 'create' isn't defined. create 已添加到提供程序中，对吗？我根本没有使用提供程序。

标签： flutter dart

【解决方案1】：

一个简单的解决方法

else if (_width < largeScreenSize && _width >= mediumScreenSize) {
          return mediumScreen as Widget ?? largeScreen  as Widget;
        } else {
          return smallScreen as Widget ?? largeScreen as Widget;
        }

【讨论】：

【解决方案2】：

我有这样的解决方案

if (_width >= largeScreenSize) {
      return largeScreen as Widget;
    } else if (_width < largeScreenSize && _width >= mediumScreenSize) {
      return mediumScreen ?? largeScreen as Widget;
    } else {
      return smallScreen ?? largeScreen as Widget;
    }

【讨论】：

【解决方案3】：

您应该始终返回一个小部件，您在最后一个 else 返回一个 null，尝试添加一个 Empty Container 后备，例如：

return LayoutBuilder(
    builder: (context, constraints) {
        double _width = constraints.maxWidth;

        if (_width > largeScreenSize) {
          return largeScreen;
        } else if (_width < largeScreenSize && _width >= mediumScreenSize) {
          return mediumScreen ?? largeScreen;
        }

        // Default return
        return smallScreen ?? largeScreen ?? Container();
    },
);

【讨论】：

你试过这个代码吗？如果 _width > largeScreenSize 且 largeScreen 为 null，则将返回 null。不幸的是，这段代码不应该工作。

【解决方案4】：

您会遇到这个问题，因为它们中的 3 个可能为 null，因此没有最后一个默认小部件来避免返回 null。

在不可为空的更新之后@required 现在是required。看来您希望 LargeScreen 是必需的。所以你可以用这段代码解决这个问题。

class ResponsiveWidget extends StatelessWidget {
  final Widget largeScreen;
  final Widget? mediumScreen;
  final Widget? smallScreen;

  const ResponsiveWidget({
    Key? key,
    required this.largeScreen,
    this.mediumScreen,
    this.smallScreen,
  }) : super(key: key);

【讨论】：