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的顶部标题栏,但是,不仅仅限于顶部,可以放在其他地方,可定义左侧按钮,中间标题和右侧按钮: