简介

带有选中标记的 Material 设计风格的弹出菜单

默认高度为48px，水平布局使用 ListTile 复选标记是 Icons.done 图标，显示在 leading 位置
只有在状态为选中时才会显示图标

基本用法

配合 PopupMenuButton 使用

enabled 属性控制item是否为可点击
checked 标识item是否为选中状态

实例演示

import 'package:flutter/material.dart';
//import 'package:fluttertoast/fluttertoast.dart';

class CheckedPopupMenuItemDemo extends StatefulWidget {
  _CheckedPopupMenuItemDemoState createState() =>
      _CheckedPopupMenuItemDemoState();
}

class _CheckedPopupMenuItemDemoState extends State<CheckedPopupMenuItemDemo> {
  List<String> _checkedValues;

  final String _checkedValue1 = 'One';
  final String _checkedValue2 = 'Two';
  final String _checkedValue3 = 'Free';
  final String _checkedValue4 = 'Four';

  @override
  void initState() {
    super.initState();
    _checkedValues = <String>[_checkedValue3];
  }


  bool isChecked(String value) => _checkedValues.contains(value);

  void showCheckedMenuSelections(String value){
    if(_checkedValues.contains(value)){
      _checkedValues.remove(value);
    }else{
      _checkedValues.add(value);
    }

    Scaffold.of(context).showSnackBar( SnackBar(
                content:  Text('Checked $_checkedValues')));
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Theme.of(context).primaryColor,
      child: ListTile(
        title: const Text('CheckedPopupMenuItem Demo',style: TextStyle(color:  Colors.white),),
        trailing: PopupMenuButton<String>(
          padding: EdgeInsets.zero,
          onSelected: showCheckedMenuSelections,
          icon: Icon(Icons.menu,color: Colors.white,),
          itemBuilder: (BuildContext context)=><PopupMenuItem<String>>[
            CheckedPopupMenuItem<String>(
                  value: _checkedValue1,
                  checked: isChecked(_checkedValue1),
                  child: Text(_checkedValue1)
                ),
                CheckedPopupMenuItem<String>(
                  value: _checkedValue2,
                  enabled: false,
                  checked: isChecked(_checkedValue2),
                  child: Text(_checkedValue2)
                ),
                CheckedPopupMenuItem<String>(
                  value: _checkedValue3,
                  checked: isChecked(_checkedValue3),
                  child: Text(_checkedValue3)
                ),
                CheckedPopupMenuItem<String>(
                  value: _checkedValue4,
                  checked: isChecked(_checkedValue4),
                  child: Text(_checkedValue4)
                )
          ],
        ),
      ),
    );
  }
}