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: ......

以上是最簡單的彈出效果 :app

 

效果好點的(一樣麻煩點)以下 :async

            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';ui

kBottomNavigationBarHeight 獲取到默認的appbar高度spa

import 'dart:ui';3d

MediaQueryData.fromWindow(window).padding.top 獲取到默認狀態欄的高度code

彈出效果 :(背景色暫時不知怎麼改)blog

相關文章
相關標籤/搜索