class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'AppBar',
home: Scaffold(
//顶部标题栏
appBar: AppBar(
title: Text('AppBar'),
),
//此container默认充满屏幕,但是如果设置了宽高,或者设置了子元素align的widthFactor和heightFactor,则以它为准
body: DemoPage(),
));
}
}
class DemoPage extends StatefulWidget {
@override
_DemoPageState createState() => _DemoPageState();
}
class _DemoPageState extends State<DemoPage> {
@override
Widget build(BuildContext context) {
// return SizedBox(
// height: 200.0,
// child: AppBar(
// title: Text('应用'),
// actions: <Widget>[
// IconButton(
// icon: Icon(Icons.print),
// onPressed: null,
// tooltip: '打印',
// ),
// IconButton(
// icon: Icon(Icons.plus_one),
// onPressed: null,
// tooltip: '更多',
// ),
// IconButton(
// icon: Icon(Icons.share),
// onPressed: null,
// tooltip: '分享',
// ),
// ],
// ),
// );
return SizedBox(
height: 500.0,
//放在其他地方的AppBar
child: AppBar(
title: Text('应用'),
backgroundColor: Colors.green,
leading: Icon(Icons.home),
centerTitle: true,
actions: <Widget>[
IconButton(
icon: Icon(Icons.print),
onPressed: null,
tooltip: '打印',
),
//弹出层(按钮样式为三个点)
PopupMenuButton<String>(
itemBuilder: (context) => <PopupMenuItem<String>>[
PopupMenuItem<String>(
value: 'friend',
child: Text('分享到朋友圈'),
),
PopupMenuItem<String>(
value: 'download',
child: Text('下载到本地'),
)
],
)
],
),
);
}
}
Flutter笔记3:AppBar详解
AppBar就是app的顶部标题栏,但是,不仅仅限于顶部,可以放在其他地方,可定义左侧按钮,中间标题和右侧按钮:
