自定义 Scaffold 类不绘制 AppBar答案

【问题标题】：Custom Scaffold class not draw the AppBar自定义 Scaffold 类不绘制 AppBar
【发布时间】：2022-01-18 16:02:42
【问题描述】：

我正在尝试创建一个扩展原始类的自定义脚手架。如果没有传递一个新的，则使用默认的 AppBar。

class CommonScaffold extends Scaffold {
  final AppBar? appBar;
  final Widget body;

  CommonScaffold({
    Key? key,
    this.appBar,
    required this.body,
  }) : super(
    key: key,
    body: body,
    appBar: appBar ??
        AppBar(
          title: const Text("Default Text"),
        ),
  );
}

如果我调用类避免传递 appBar 参数，AppBar 将不会出现。但应该会出现。

@override
  Widget build(BuildContext context) {
    return CommonScaffold(
      body: _createContent(),
    );
  }

如果我调用将 AppBar 传递给 appBar 参数的类，则会出现 AppBar。

@override
  Widget build(BuildContext context) {
    return CommonScaffold(
      body: _createContent(),
      appBar: AppBar(
          title: const Text("TEST"),
      ),
    );
  }

【问题讨论】：

标签： flutter flutter-layout appbar scaffold

【解决方案1】：

问题在于我们有两个appBar 和body 用于CommonScaffold。第一组是因为extends Scaffold 而第二组是通过在CommonScaffold 上声明两个。

你可以通过运行这个 sn-p 来检查它在 OOP 上是如何工作的。 On dartPad。为了更好地理解这个概念，我正在更改名称。

class Super {
  final int? a;
  final int? b;

  const Super({this.a, this.b});
}

class Common extends Super {
  final int? ca;
  final int b;

  const Common({this.ca, required this.b}) : super(a: ca ?? 10, b: b);
}

void main() {
  final c = Common(b: 1);
  print("supper a: ${c.a}"); // 10:  will refer supper class 
  print("Common a: ${c.ca}"); // null:  will refer common class 
}

现在为您解答，最好更改CommonScaffold 的属性名称以避免与超类冲突。

这是dartPad上的答案


class CommonScaffold extends Scaffold {
  final AppBar? cAppBar;

  final Widget? cBody;

  CommonScaffold({
    Key? key,
    this.cAppBar,
    this.cBody,
  }) : super(
            key: key,
            body: cBody,
            appBar: cAppBar ??
                AppBar(
                  title: Text("Default Appbar"),
                ));
}

class A extends StatelessWidget {
  const A({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CommonScaffold(
      cBody: Text("body"),
    );
  }
}

【讨论】：

【解决方案2】：

如果您只想显示或不显示 appBar，则可以通过修改 bool 的值来使用此示例以显示或不显示栏

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: (showAppbar)? AppBar(
          title: const Text("Default Text"),
        ): AppBar(
          title: const Text("TEST"),
      ),
      body: Center(
        child: Text(
          'Hello, a!',
        ),
      ),
    );
  }

【讨论】：