Вы можете настроить AppBarWidget , ключевое слово с очень важно, или вы можете назначить пользовательские AppBarWidget для AppBar собственности строительных лесов :
import 'package:flutter/material.dart';
double _getAppBarTitleWidth(
double screenWidth, double leadingWidth, double tailWidth) {
return (screenWidth - leadingWidth - tailWidth);
}
class AppBarWidget extends StatelessWidget with PreferredSizeWidget {
AppBarWidget(
{Key key,
@required this.leadingChildren,
@required this.tailChildren,
@required this.title,
this.leadingWidth: 110,
this.tailWidth: 30})
: super(key: key);
final List<Widget> leadingChildren;
final List<Widget> tailChildren;
final String title;
final double leadingWidth;
final double tailWidth;
@override
Widget build(BuildContext context) {
double _screenWidth = MediaQuery.of(context).size.width;
double _titleWidth =
_getAppBarTitleWidth(_screenWidth, leadingWidth, tailWidth);
double _offsetToRight = leadingWidth - tailWidth;
return AppBar(
title: Row(
children: [
Container(
width: leadingWidth,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: leadingChildren,
),
),
Container(
color: Colors.green,
width: _titleWidth,
padding: const EdgeInsets.only(left: 5.0, right: 5),
child: Container(
padding: EdgeInsets.only(right: _offsetToRight),
color: Colors.deepPurpleAccent,
child: Center(
child: Text('$title'),
),
),
),
Container(
color: Colors.amber,
width: tailWidth,
child: Row(
children: tailChildren,
),
)
],
),
titleSpacing: 0.0,
);
}
@override
Size get preferredSize => Size.fromHeight(kToolbarHeight);
}
Ниже приводится пример того, как его использовать:
import 'package:flutter/material.dart';
import 'package:seal_note/ui/Detail/DetailWidget.dart';
import 'package:seal_note/ui/ItemListWidget.dart';
import 'Common/AppBarWidget.dart';
import 'Detail/DetailPage.dart';
class MasterDetailPage extends StatefulWidget {
@override
State<StatefulWidget> createState() => _MasterDetailPageState();
}
class _MasterDetailPageState extends State<MasterDetailPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBarWidget(leadingChildren: [
IconButton(
icon: Icon(
Icons.arrow_back_ios,
color: Colors.white,
),
),
Text(
'文件夹',
style: TextStyle(fontSize: 14.0),
),
], tailChildren: [
Icon(Icons.book),
Icon(Icons.hd),
], title: '英语知识',leadingWidth: 140,tailWidth: 50,),
body: Text('I am body'),
);
}
}