flutter appbar的menu

    return new Scaffold(
      appBar: new AppBar(
        title: new Text("弹出菜单控件"),
        actions: <Widget>[
          new PopupMenuButton(
            onSelected: (String value){
               setState(() {
                 _bodyStr = value;
               });
            },
              itemBuilder: (BuildContext context) =><PopupMenuItem<String>>[
                new PopupMenuItem(
                    value:"选项一的内容",
                    child: new Text("选项一")
                ),
                new PopupMenuItem(
                  value: "选项二的内容",
                    child: new Text("选项二")
                )
              ]
          )
        ],
      ),
      body: ......

以上是最简单的弹出效果 :

 

效果好点的(同样麻烦点)如下 :

            actions: <Widget>[
              new GestureDetector(
                  child: new Icon(Icons.book),
                  onTap: () {
                    ///进入下一页(myNote)
                    Navigator.of(context).pushNamed('/myNote');
                  }),
              new Padding(
                padding: const EdgeInsets.symmetric(horizontal: 5.0),
              ),
              new GestureDetector(
                child: new Icon(Icons.menu),
                onTap: () async {
                  final result = await showMenu(
                      context: context,
                      position: RelativeRect.fromLTRB(
                          2000.0,
                          kBottomNavigationBarHeight +
                              MediaQueryData.fromWindow(window).padding.top,
                          0.0,
                          0.0),
                      items: <PopupMenuItem<String>>[

import 'package:flutter/src/material/constants.dart';

kBottomNavigationBarHeight 获取到默认的appbar高度

import 'dart:ui';

MediaQueryData.fromWindow(window).padding.top 获取到默认状态栏的高度

弹出效果 :(背景色暂时不知怎么改)

posted on 2018-12-10 14:19  --LP--  阅读(1922)  评论(0)    收藏  举报

导航