©2020-2024 ioDraw All rights reserved
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页面使用的时自定义标题栏。
学习记录，每天不停进步。