flutter的appbar

一般App都有个顶部导航，这篇文章我们介绍一下flutter的appBar

image.png

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'flutter的appbar'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        leading: Icon(Icons.home),
        centerTitle: true,
        actions: <Widget>[
          PopupMenuButton(
            onSelected: (String action) {
              switch (action) {
                case "add":
                  print("add");
                  break;
                case "new":
                  print("chat");
                  break;
              }
            },
            icon: Icon(
              Icons.add,
            ),
            itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
              PopupMenuItem(
                value: "add",
                child: Row(
                  children: <Widget>[
                    Icon(
                      Icons.person_add,
                      color: Colors.black26,
                    ),
                    new Text("添加好友"),
                  ],
                ),
              ),
              PopupMenuItem(
                value: "chat",
                child: Row(
                  children: <Widget>[
                    Icon(
                      Icons.chat,
                      color: Colors.black26,
                    ),
                    new Text("发起群聊"),
                  ],
                ),
              ),
            ],
          ),
          Icon(Icons.search),
          Icon(Icons.add),
        ],
      ),
      body: Container(
          child: ListView(
        children: <Widget>[
          Card(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadiusDirectional.circular(20),
            ),
            clipBehavior: Clip.antiAlias,
            child: Image.asset(
              "images/big.jpg",
              width: double.maxFinite,
            ),
          ),
        ],
      )), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

1、App左上角的图标

        leading: Icon(Icons.home),

2、App标题

        title: Text(widget.title),

3、标题居中展示

        centerTitle: true,

4、有上角按钮

        actions: <Widget>[
          PopupMenuButton(
            onSelected: (String action) {
              switch (action) {
                case "add":
                  print("add");
                  break;
                case "new":
                  print("chat");
                  break;
              }
            },
            icon: Icon(
              Icons.add,
            ),
            itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
              PopupMenuItem(
                value: "add",
                child: Row(
                  children: <Widget>[
                    Icon(
                      Icons.person_add,
                      color: Colors.black26,
                    ),
                    new Text("添加好友"),
                  ],
                ),
              ),
              PopupMenuItem(
                value: "chat",
                child: Row(
                  children: <Widget>[
                    Icon(
                      Icons.chat,
                      color: Colors.black26,
                    ),
                    new Text("发起群聊"),
                  ],
                ),
              ),
            ],
          ),
          Icon(Icons.search),
          Icon(Icons.add),
        ],

PopupMenuButton 弹出按钮，类似微信右上角弹出菜单

image.png