flutter入门AppBartitleSpacing

AppBar 显示在app的顶部。AppBar包含5大部分，如下图：

相关属性代码展示以及运行UI效果展示如下：

import 'package:flutter/material.dart';
//void main() {
// runApp(
// new Center(
// child: new Text(
// 'Hello, world!',
// textDirection: TextDirection.ltr,
// ),
// ),
// );
//}
class MyAppBar extends StatelessWidget {
MyAppBar({this.title});
final Widget title;
@override
Widget build(BuildContext context) {
return new Container(
height: 56.0, //在逻辑像素中
padding: const EdgeInsets.symmetric(horizontal: 8.0),
decoration: new BoxDecoration(color: Colors.blue[500]),
//Row是水平线性布局。
child: new Row(
children: [
new IconButton(
icon: new Icon(Icons.menu),
tooltip: 'Navigation menu',
onPressed: null, // null禁用按钮
),
// Expanded扩展其子项以填充可用空间。
new Expanded(
child: title,
),
new IconButton(
icon: new Icon(Icons.search),
tooltip: 'Search',
onPressed: null,
),
],
),
);
}
}
class MyScaffold extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Material(
// Column 是垂直的线性布局
child: new Column(
children: [
new MyAppBar(
title: new Text(
'Example title',
style: Theme.of(context).primaryTextTheme.title,
),
),
new Expanded(
child: new Center(
child: new Text('Hello, world!'),
),
),
],
),
);
}
}
void main() {
runApp(new MaterialApp(
title: 'My app',
home: new Scaffold(
appBar: new AppBar(
leading: new Builder(
builder: (BuildContext context) {
return new IconButton(
icon: const Icon(Icons.menu),
onPressed: () { Scaffold.of(context).openDrawer(); },
tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
);
},
),
iconTheme: new IconThemeData(color: Colors.red[500]),
backgroundColor: Colors.black,
automaticallyImplyLeading: false,
title: new Text('首页'),
centerTitle: true,
actions: [
new IconButton(
icon: new Icon(Icons.menu,color: Colors.white,),
tooltip: 'Navigation menu',
onPressed: null, // null禁用按钮
),
// Expanded扩展其子项以填充可用空间。
new IconButton(
icon: new Icon(Icons.search,color: Colors.redAccent,),
tooltip: 'Search',
onPressed: null,
),
],
),
body: new MyAppBar(
title: new Text('xxxx'),
),
),
));
}