為什么80%的碼農都做不了架構師？>>> ??

自帶AppBar 有限制

到app_bar.dart 中將? AppBar 和 _AppBarState 類復制到自定義的wAppBar 中

?刪除多余的Widget 保留樣式參數??

import 'package:flutter/material.dart'; import 'package:flutter/foundation.dart'; import 'package:flutter/rendering.dart'; import 'package:flutter/services.dart'; import 'package:flutter/widgets.dart';//kToolbarHeight 狀態欄的高度 包括劉海 class _ToolbarContainerLayout extends SingleChildLayoutDelegate {const _ToolbarContainerLayout();@overrideBoxConstraints getConstraintsForChild(BoxConstraints constraints) {return constraints.tighten(height: kToolbarHeight);}@overrideSize getSize(BoxConstraints constraints) {return Size(constraints.maxWidth, kToolbarHeight);}@overrideOffset getPositionForChild(Size size, Size childSize) {return Offset(0.0, size.height - childSize.height);}@overridebool shouldRelayout(_ToolbarContainerLayout oldDelegate) => false; } class WAppBar extends StatefulWidget implements PreferredSizeWidget {WAppBar({Key key,this.child, //自定義 widget 刪除其他多余的wigdetthis.bottom,this.elevation,this.shape,this.backgroundColor,this.brightness,this.iconTheme,this.actionsIconTheme,this.textTheme,this.primary = true,this.centerTitle,this.titleSpacing = NavigationToolbar.kMiddleSpacing,this.toolbarOpacity = 1.0,this.bottomOpacity = 1.0,}) : assert(elevation == null || elevation >= 0.0),assert(primary != null),assert(titleSpacing != null),assert(toolbarOpacity != null),assert(bottomOpacity != null),preferredSize = Size.fromHeight(kToolbarHeight + (bottom?.preferredSize?.height ?? 0.0)),super(key: key);final Widget child;final PreferredSizeWidget bottom;final double elevation;final ShapeBorder shape;final Color backgroundColor;final Brightness brightness;final IconThemeData iconTheme;final IconThemeData actionsIconTheme;final TextTheme textTheme;final bool primary;final bool centerTitle;final double titleSpacing;final double toolbarOpacity;final double bottomOpacity;@overridefinal Size preferredSize;@override_WAppBarState createState() => _WAppBarState(); }class _WAppBarState extends State<WAppBar> {static const double _defaultElevation = 0.0;@overrideWidget build(BuildContext context) {assert(!widget.primary || debugCheckHasMediaQuery(context));assert(debugCheckHasMaterialLocalizations(context));final ThemeData themeData = Theme.of(context);final AppBarTheme appBarTheme = AppBarTheme.of(context);final ScaffoldState scaffold = Scaffold.of(context, nullOk: true);final ModalRoute<dynamic> parentRoute = ModalRoute.of(context);IconThemeData overallIconTheme = widget.iconTheme?? appBarTheme.iconTheme?? themeData.primaryIconTheme;IconThemeData actionsIconTheme = widget.actionsIconTheme?? appBarTheme.actionsIconTheme?? overallIconTheme;TextStyle centerStyle = widget.textTheme?.title?? appBarTheme.textTheme?.title?? themeData.primaryTextTheme.title;TextStyle sideStyle = widget.textTheme?.body1?? appBarTheme.textTheme?.body1?? themeData.primaryTextTheme.body1;print(sideStyle);if (widget.toolbarOpacity != 1.0) {final double opacity = const Interval(0.25, 1.0, curve: Curves.fastOutSlowIn).transform(widget.toolbarOpacity);if (centerStyle?.color != null)centerStyle = centerStyle.copyWith(color: centerStyle.color.withOpacity(opacity));if (sideStyle?.color != null)sideStyle = sideStyle.copyWith(color: sideStyle.color.withOpacity(opacity));overallIconTheme = overallIconTheme.copyWith(opacity: opacity * (overallIconTheme.opacity ?? 1.0));actionsIconTheme = actionsIconTheme.copyWith(opacity: opacity * (actionsIconTheme.opacity ?? 1.0));}Widget appBar = ClipRect(child: CustomSingleChildLayout(delegate: const _ToolbarContainerLayout(),child: IconTheme.merge(data: overallIconTheme,child: DefaultTextStyle(style: sideStyle, // child: toolbar,child: widget.child,),),),);if (widget.bottom != null) {appBar = Column(mainAxisAlignment: MainAxisAlignment.spaceBetween,children: <Widget>[Flexible(child: ConstrainedBox(constraints: const BoxConstraints(maxHeight: kToolbarHeight),child: appBar,),),widget.bottomOpacity == 1.0 ? widget.bottom : Opacity(opacity: const Interval(0.25, 1.0, curve: Curves.fastOutSlowIn).transform(widget.bottomOpacity),child: widget.bottom,),],);}// The padding applies to the toolbar and tabbar, not the flexible space.if (widget.primary) {appBar = SafeArea(top: true,child: appBar,);}appBar = Align(alignment: Alignment.topCenter,child: appBar,);final Brightness brightness = widget.brightness?? appBarTheme.brightness?? themeData.primaryColorBrightness;final SystemUiOverlayStyle overlayStyle = brightness == Brightness.dark? SystemUiOverlayStyle.light: SystemUiOverlayStyle.dark;return Semantics(container: true,child: AnnotatedRegion<SystemUiOverlayStyle>(value: overlayStyle,child: Material(color: widget.backgroundColor?? appBarTheme.color?? themeData.primaryColor,elevation: widget.elevation?? appBarTheme.elevation?? _defaultElevation,shape: widget.shape,child: Semantics(explicitChildNodes: true,child: appBar,),),),);} }

調用 自定義wAppBar

appBar: WAppBar(child: new Container(child: new Align(child: Text("我是大標題",style: TextStyle(fontSize: 30.0),),),), ),

?

?

轉載于:https://my.oschina.net/woddp/blog/3029048

總結

以上是生活随笔為你收集整理的flutter 自定义 AppBar的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。