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;
// TODO: implement preferredSize
Size get preferredSize => Size(
ScreenUtil().screenWidth, toolbarHeight + ScreenUtil().statusBarHeight);
State<StatefulWidget> createState() => _WebAppBarState();
}
class _WebAppBarState extends State<WebAppBar> {
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页面使用的时自定义标题栏。文章来源:https://www.toymoban.com/news/detail-562719.html
学习记录,每天不停进步。文章来源地址https://www.toymoban.com/news/detail-562719.html
到了这里,关于flutter开发实战-webview自定义标题栏Appbar的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!