37 Flutter Popupwindow

最新推荐文章于 2024-04-06 10:41:54 发布

原创最新推荐文章于 2024-04-06 10:41:54 发布 · 1.1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#flutter

Flutter 专栏收录该内容

70 篇文章

订阅专栏

本文详细介绍了如何在Flutter中使用PopupMenuButton创建一个带有自定义项、初始值和回调的选项菜单，包括itemBuilder属性的使用和常见组件的配置。适合初学者了解状态管理与UI交互。

Popupwindow

一.PopupMenuButton

1.属性

属性	说明
itemBuilder	item子项
initialValue	初始值
onSelected	选择其中一项时回调
onCanceled	点击空白处，不选择时回调
tooltip	提示
elevation	Z轴阴影
child	子控件，不能和icon都设置
icon	IconButton子控件，不能和child都设置

2.基础使用

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              title: Text("flutter demo"),
              actions: [PopupMenuButtonDemo()],
            ),
            body: Center()));
  }
}

enum WhyFarther { harder, smarter, selfStarter, tradingCharter }

class PopupMenuButtonDemo extends StatefulWidget {
  PopupMenuButtonDemo({Key key}) : super(key: key);

  @override
  _PopupMenuButtonDemoState createState() {
    return _PopupMenuButtonDemoState();
  }
}

class _PopupMenuButtonDemoState extends State<PopupMenuButtonDemo> {
  var _selection;

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return PopupMenuButton<WhyFarther>(
      initialValue: WhyFarther.harder,
      elevation: 30,
        onCanceled: () {
          print("选择回调");
        },
      onSelected: (WhyFarther result) {
        setState(() {
          _selection = result;
          print(_selection);
        });
      },
      icon: Icon(Icons.settings),
      itemBuilder: (BuildContext context) => <PopupMenuEntry<WhyFarther>>[
        const PopupMenuItem<WhyFarther>(
          value: WhyFarther.harder,
          child: Text('Working a lot harder'),
        ),
        const PopupMenuItem<WhyFarther>(
          value: WhyFarther.smarter,
          child: Text('Being a lot smarter'),
        ),
        const PopupMenuItem<WhyFarther>(
          value: WhyFarther.selfStarter,
          child: Text('Being a self-starter'),
        ),
        const PopupMenuItem<WhyFarther>(
          value: WhyFarther.tradingCharter,
          child: Text('Placed in charge of trading charter'),
        ),
      ],
    );
  }
}