flutter开发实战-webview自定义标题栏Appbar

flutter开发实战-webview定义标题栏Appbar

在开发中，使用到webview，在之前实现webview使用，webview页面使用的时自定义标题栏，在上一个webview结合JsBridge实现交互忘记这个标题栏，这里记录一下。

一、PreferredSizeWidget

abstract class PreferredSizeWidget implements Widget {
  /// The size this widget would prefer if it were otherwise unconstrained.
  ///
  /// In many cases it's only necessary to define one preferred dimension.
  /// For example the [Scaffold] only depends on its app bar's preferred
  /// height. In that case implementations of this method can just return
  /// `Size.fromHeight(myAppBarHeight)`.
  Size get preferredSize;
}

二、实现定义标题栏Appbar

/// 自定义Appbar
class WebAppBar extends StatefulWidget implements PreferredSizeWidget {
  const WebAppBar(
      {Key? key,
      required this.toolbarHeight,
      this.elevation,
      this.backgroundColor,
      this.leadingWidget,
      this.trailingWidget,
      this.centerWidget,
      this.brightness,
      this.backgroundImageName})
      : super(key: key);

  final double toolbarHeight;
  final double? elevation;
  final Color? backgroundColor;
  final Widget? leadingWidget;
  final Widget? trailingWidget;
  final Widget? centerWidget;
  final Brightness? brightness;
  final String? backgroundImageName;

  @override
  // TODO: implement preferredSize
  Size get preferredSize => Size(
      ScreenUtil().screenWidth, toolbarHeight + ScreenUtil().statusBarHeight);

  @override
  State<StatefulWidget> createState() => _WebAppBarState();
}

class _WebAppBarState extends State<WebAppBar> {
  @override
  Widget build(BuildContext context) {
    final SystemUiOverlayStyle overlayStyle =
        widget.brightness == Brightness.dark
            ? SystemUiOverlayStyle.light
            : SystemUiOverlayStyle.dark;

    Widget leadingWidget = (widget.leadingWidget ?? Container());
    Widget centerWidget = (widget.centerWidget ?? Container());
    Widget trailingWidget = (widget.trailingWidget ?? Container());

    return AnnotatedRegion<SystemUiOverlayStyle>(
      //套AnnotatedRegion是为了增加状态栏控制
      value: overlayStyle,
      child: Material(
        color: Colors.transparent,
        //套Material是为了增加elevation
        elevation: widget.elevation ?? 0,
        child: Container(
          padding: EdgeInsets.symmetric(horizontal: 0.0),
          height: widget.toolbarHeight + ScreenUtil().statusBarHeight,
          decoration: BoxDecoration(
            color: widget.backgroundColor,
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Container(
                height: ScreenUtil().statusBarHeight,
              ),
              Expanded(
                child: Container(
                  height: widget.toolbarHeight,
                  alignment: Alignment.center,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Container(
                        height: widget.toolbarHeight,
                        child: leadingWidget,
                      ),
                      Expanded(
                        child: Container(
                          alignment: Alignment.center,
                          height: widget.toolbarHeight,
                          child: centerWidget,
                        ),
                      ),
                      Container(
                        height: widget.toolbarHeight,
                        child: trailingWidget,
                      ),
                    ],
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

三、小结

flutter开发实战-webview定义标题栏Appbar，PreferredSizeWidget webview页面使用的时自定义标题栏。

学习记录，每天不停进步。