Question

[想通了：在下面发布了答案。我必须实现 PreferredSizeWidget]

我正在尝试创建一个可重复使用的 AppBar 小部件，因为我在不同屏幕上的 AppBar 有几个共同的属性。

这是我的 AppBar 代码：

class WidgetAppBar extends PreferredSize {
  final double height;
  final String title;
  final List<Widget> actions;

  WidgetAppBar({
    @required this.height,
    @required this.title,
    this.actions,
  });

  @override
  Widget build(BuildContext context) {
    return PreferredSize(
      preferredSize: Size.fromHeight(
        height,
      ),
      child: AppBar(
        backgroundColor: Colors.colorAppBarBackground,
        elevation: 0,
        leadingWidth: Dimens.appBarLeadingWidth,
        centerTitle: false,
        title: Text(
          title,
          style: Styles.appBarTitle,
        ),
        actions: [
          for (Widget widget in actions) widget,
        ],
      ),
    );
  }
}

这是我在另一个小部件中使用它的方式：

这是我的构建函数，我没有包含我的整个文件。

    @override
  Widget build(BuildContext context) {
    String _logMethod = "Widget build()";
    logFlow(_screenString, _logMethod, "start");

    // UI variables
    double screenHeight = MediaQuery.of(context).size.height;
    double safeAreaPadding = MediaQuery.of(context).padding.top +
        MediaQuery.of(context).padding.bottom;
    double appBarHeight = screenHeight / 16;
    double bodyHeight = screenHeight - (appBarHeight + safeAreaPadding);

    logFlow(_screenString, _logMethod, "end");

    return WillPopScope(
      onWillPop: () async => false,
      child: SafeArea(
        child: Scaffold(
          drawer: buildDrawer(
            _logMethod,
            bodyHeight,
          ),
          appBar: WidgetAppBar(
            screen: _screenString,
            parent: _logMethod,
            height: appBarHeight,
            title: Strings.screenHomeTitle,
            actions: <Widget>[
              WidgetHomeAppBarDate(
                navigationController: _navigationController,
                screen: _screenString,
                parent: _logMethod,
                dateText: _date,
              ),
            ],
          ),
          //     PreferredSize(
          //   preferredSize: Size.fromHeight(
          //     appBarHeight,
          //   ),
          //   child: AppBar(
          //     backgroundColor: Colors.colorAppBarBackground,
          //     elevation: 0,
          //     leadingWidth: Dimens.appBarLeadingWidth,
          //     centerTitle: false,
          //     title: Text(
          //       Strings.screenHomeTitle,
          //       style: Styles.appBarTitle,
          //     ),
          //     actions: <Widget>[
          //       WidgetHomeAppBarDate(
          //         navigationController: _navigationController,
          //         screen: _screenString,
          //         parent: _logMethod,
          //         dateText: _date,
          //       ),
          //     ],
          //   ),
          // ),
          backgroundColor: Colors.colorScreenBackground,
          body: buildBody(
            _logMethod,
            bodyHeight,
          ),
        ),
      ),
    );
  }

我收到错误：

The getter 'height' was called on null.
Receiver: null
Tried calling: height

我不知道那是什么意思。请帮忙，我正在努力学习。

Answer 1

尝试将您的小部件更改为此

class WidgetAppBar extends StatelessWidget {
  final String title;
  final List<Widget> actions;

  WidgetAppBar({
    @required this.title,
    this.actions,
  });
  @override
  Widget build(BuildContext context) {
    return AppBar(
      backgroundColor: Colors.colorAppBarBackground,
      elevation: 0,
      leadingWidth: Dimens.appBarLeadingWidth,
      centerTitle: false,
      title: Text(
        title,
        style: Styles.appBarTitle,
      ),
      actions: actions ?? []
    );
  }
}

Appbar 的高度会根据里面的小部件自动改变。不要勉强

Answer 2

这是工作代码：

class WidgetAppBar extends StatelessWidget implements PreferredSizeWidget {
  final String screen;
  final String parent;
  final double height;
  final String title;
  final List<Widget> actions;

  const WidgetAppBar({
    Key key,
    @required this.screen,
    @required this.parent,
    @required this.height,
    @required this.title,
    this.actions,
  }) : super(key: key);

  @override
  Size get preferredSize => Size.fromHeight(height);

  @override
  Widget build(BuildContext context) {
    final String _logMethod = "$parent -> WidgetAppBar/build()";
    logFlow(screen, _logMethod, "start");

    logFlow(screen, _logMethod, "end");

    // Return appBar
    return AppBar(
      backgroundColor: Colors.colorAppBarBackground,
      elevation: 0,
      leadingWidth: Dimens.appBarLeadingWidth,
      centerTitle: false,
      title: Text(
        title,
        style: Styles.appBarTitle,
      ),
      actions: actions ?? [],
    );
  }
}

我必须实现 PreferredSizeWidget。

尝试创建一个可重用的 AppBar 会导致错误“The getter 'height' was called on null”。

2 个答案: