import 'package:flutter/material.dart';
class ListTitleBar extends StatefulWidget implements PreferredSizeWidget {
final String _left;
final String _right;
ListTitleBar(this._left, this._right);
@override
State<StatefulWidget> createState() => new ListTitleBarState(_left, _right);
// PreferredSizeWidget必须要重写 preferredSize,即AppBar高度
@override
Size get preferredSize {
return new Size.fromHeight(20.0);
}
}
class ListTitleBarState extends State<ListTitleBar> {
String _leftTitle;
String _rightTitle;
ListTitleBarState(this._leftTitle, this._rightTitle);
@override
Widget build(BuildContext context) {
return new Container(
decoration: new BoxDecoration(
color: Colors.redAccent,
border: new Border.all(color: Colors.black),
),
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
// 左tab标题
new Column(
children: <Widget>[
new Container(
color: Colors.redAccent,
padding: const EdgeInsets.all(10.0),
child: new Text(_leftTitle,
style: new TextStyle(
color: Colors.white,
fontSize: 18.0
),
),
)
],
),
// 右tab标题
new Column(
children: <Widget>[
new Container(
color: Colors.redAccent,
padding: const EdgeInsets.all(10.0),
child: new Text(_rightTitle,
style: new TextStyle(
color: Colors.white,
fontSize: 18.0
),
),
)
],
),
],
),
);
}
@override
void initState() {
super.initState();
}
@override
void dispose() {
super.dispose();
}
}
通过PreferredSizeWidget实现自定义Appbar
AppBar是Scaffold组件的一个属性,通常是一个标题,至多再在左侧加个按钮,右侧再加几个按钮,如果想实现页面的AppBar是个tab栏,可以左右切换,而并非一个简单粗暴的标题,就可以使用自定义AppBar,AppBar组件是PreferredSizeWidget的实现,下面的代码即可实现自定义appBar:
