首页 > 建站教程 > APP开发,混合APP >  Flutter笔记3:AppBar详解正文

Flutter笔记3:AppBar详解

AppBar就是app的顶部标题栏,但是,不仅仅限于顶部,可以放在其他地方,可定义左侧按钮,中间标题和右侧按钮:
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('下载到本地'),
              )
            ],
          )
        ],
      ),
    );
  }
}