flutter AppBar 自定义的封装
2020-08-06 本文已影响0人
微风_10a5
项目中难免会遇到要自定义方案的需求, 如何自定义AppBar,还能很好的适配各种机型呢,本文就是来解决这个问题的!
来先上最终运行起来的效果图~
-
底部需要分隔线的
9472084-d402d6a9355ff23e.png
-
title 位置随意放的
9472084-5d0e93c1aec2af39.png
9472084-b6c0650e54e70330.png
9472084-67a87269e0a6803f.png
-
背景颜色需要改变的
9472084-7545df2c3a2ac790.png
-
内容自定义的
2.png
底部需要分隔线的
新建一个类ZZAppBar,继承自系统AppBar, 先把系统AppBar有的功能全部继承下来,然后只需要微改一下,与自己需求相关的地方
代码如下:
import 'package:flutter/material.dart';
class ZZAppBar extends AppBar {
ZZAppBar({PreferredSizeWidget bottom, Widget title})
: super(
bottom: PreferredSize(
child: Container(
color: Colors.red,
width: double.infinity,
height: 5,
),
preferredSize: Size.fromHeight(10)),
title: title,
);
}
使用的时候,只需要把AppBar() 换成 ZZAppBar()
appBar: ZZAppBar(title: Text("app bar demo"),),
项目中,需要对系统的app进行微调的,使用此方案是比较靠谱的,使用起来简单方便,与使用系统AppBar一样方便. 比喻说,不需要AppBar 底部的阴影啊, 需要有一个分隔线啊,或者还需要整个工程里面把AppBar的颜色换成统一的颜色的等等,都可以使用此方案.
再看下面的小案例
import 'package:flutter/material.dart';
class ZZAppBar extends AppBar {
ZZAppBar({PreferredSizeWidget bottom, Widget title,Color backGroundColor})
: super(
bottom: PreferredSize(
child: Container(
color: Colors.red,
width: double.infinity,
height: 5,
),
preferredSize: Size.fromHeight(10)),
title: title,
backgroundColor:Colors.brown
);
}
运行效果
3.png
title 位置随意放的
来先上代码,后面再详细说明
先新建一个类 ZZAppBarCustom
import 'package:flutter/material.dart';
class ZZAppBarCustom extends PreferredSize {
Widget child;
@override
final Size preferredSize;
ZZAppBarCustom({this.preferredSize, this.child});
@override
Widget build(BuildContext context) {
Widget current = child;
if (child == null) {
current = LimitedBox(
maxWidth: 0.0,
maxHeight: 0.0,
child: Container(
child: ConstrainedBox(constraints: const BoxConstraints.expand())),
);
}
return current;
}
}
在使用的时候就用这个自定义的类
appBar: ZZAppBarCustom(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
child: OwonAppBarContent(leftTitle: "app bar demo",backgroundColor: Colors.purple,),
preferredSize: Size.fromHeight(kToolbarHeight),
),
其中child,就是放你自己需要放的内容了,当然这个Widget,你也可以封装成一个文件,我这里就使用了OwonAppBarContent这个widget
代码如下:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';[图片上传中...(Simulator Screen Shot - iPhone 11 Pro - 2020-08-03 at 10.36.08.png-eb1a8a-1596422174194-0)]
class OwonAppBarContent extends StatefulWidget {
String leftTitle;
Color leftTitleColor;
VoidCallback leftClick;
Color backgroundColor;
OwonAppBarContent(
{@required this.leftTitle,
this.leftClick,
// this.leftTitleColor = Colors.blue,
this.backgroundColor = Colors.red});
@override
_OwonAppBarContentState createState() => _OwonAppBarContentState();
}
class _OwonAppBarContentState extends State<OwonAppBarContent> {
@override
Widget build(BuildContext context) {
return Container(
height: double.infinity,
color: widget.backgroundColor,
alignment: Alignment.center,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Text(
widget.leftTitle,
style: TextStyle(color: Colors.white, fontSize: 22),
),
],
),
);
}
}
运行效果就是紫色AppBar那张图了.
上面说到ZZAppBarCustom 这个类的child就是你要放的内容,当然这个Widget,你也可以不封装,随意放你要的东西,
如我这里面放了3个OutlineButton
appBar: ZZAppBarCustom(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
child: Container(
alignment: Alignment.bottomCenter,
height: double.infinity,
color: Colors.blue,
child: ButtonBar(
alignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
OutlineButton(
borderSide: BorderSide(
color: Colors.red, width: 2, style: BorderStyle.solid),
child: Text(
"房间",
style: TextStyle(color: Colors.white, fontSize: 16),
),
),
OutlineButton(
borderSide: BorderSide(
color: Colors.red, width: 2, style: BorderStyle.solid),
child: Text("设备",
style: TextStyle(color: Colors.white, fontSize: 16)),
),
OutlineButton(
borderSide: BorderSide(
color: Colors.red, width: 2, style: BorderStyle.solid),
child: Text("家庭",
style: TextStyle(color: Colors.white, fontSize: 16)),
),
],
),
),
// OwonAppBarContent(leftTitle: "app bar demo",backgroundColor: Colors.purple,),
preferredSize: Size.fromHeight(kToolbarHeight),
),
运行效果如前面的图片,有3个OutlineButton的那张图了
结尾
建议伙伴们用第一种方案,继承自系统的类,使用起来简单,后续维护的bug也会少,实在满足不了需求,才考虑后面的方案,自定义自己的组件,放在ZZAppBarCustom的child中.大家在使用的过程中,重点参考这边的思路,应该可以解决大部分问题.好了~~ 感谢大家的支持比心~
