(16)Flutter PopupMenuItem

效果

点击弹出按钮并可以选中

(16)Flutter PopupMenuItem_第1张图片(16)Flutter PopupMenuItem_第2张图片(16)Flutter PopupMenuItem_第3张图片

源码

import 'package:flutter/material.dart';

class PupupMenuDemo extends StatefulWidget {
  @override
  _PupupMenuDemoState createState() => _PupupMenuDemoState();
}

class _PupupMenuDemoState extends State {
  String _currentMenuItem = "Home";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("PopupMenu"),
        elevation: 0.0,
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(_currentMenuItem),
                PopupMenuButton(
                    onSelected: (value) {
                      setState(() {
                        _currentMenuItem = value;
                        print(value);
                      });
                    },
                    itemBuilder: (BuildContext context) => [
                          PopupMenuItem(
                            child: Text("home"),
                            value: "Home",
                          ),
                          PopupMenuItem(
                            child: Text("Discover"),
                            value: "Discover",
                          ),
                          PopupMenuItem(
                            child: Text("Communtiy"),
                            value: "Communtiy",
                          )
                        ])
              ],
            )
          ],
        ),
      ),
    );
  }
}

 

你可能感兴趣的:(042Flutter)