自定义 Scaffold 类不绘制 AppBar

Posted 2023-02-23

【中文标题】自定义 Scaffold 类不绘制 AppBar

【英文标题】：Custom Scaffold class not draw the 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"),
      ),
    );
  

【参考方案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!',
        ),
      ),
    );