flutter头部组件封装
概述
本文是在AppBar的基础上封装而成,主要功能包括:是否显示返回按钮,标题文字是否居中,是否显示头部右侧操作项等
一、header.dart封装
import 'package:flutter/material.dart';
class Header extends StatelessWidget implements PreferredSizeWidget {
final String title;
final bool isShowReturnArrow;
final Widget leading;
final List<Widget> actionList;
const Header({
@required this.title,
this.leading,
this.isShowReturnArrow=true,
this.actionList
});
@override
Size get preferredSize => Size.fromHeight(48);
@override
Widget build(BuildContext context) {
return AppBar(
automaticallyImplyLeading: isShowReturnArrow, // 是否显示返回按钮
leading: leading,
elevation: 0,
title: Text(
title
),
actions: actionList,
centerTitle: true, // 标题是否居中对齐
backgroundColor: Colors.blueAccent,
);
}
}
二、调用
....
import 'header.dart';
...
....
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: Header(
title : "tab页切换"
),
body: Container(
.....
....