Flutter笔记39：CheckedPopupMenuItem可勾选的弹出菜单_uni-app教程,flutter教程,apicloud教程_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

CheckedPopupMenuItem可勾选的弹出菜单，常常与PopupMenuButton，作为PopupMenuButton构造方法的元素：

01class MyApp extends StatelessWidget {
02  const MyApp({Key key}) : super(key: key);
03 
04  @override
05  Widget build(BuildContext context) {
06    return MaterialApp(
07      title: 'CheckedPopupMenuItem可勾选的弹出菜单',
08      home: Scaffold(
09        appBar: AppBar(
10          title: Text('CheckedPopupMenuItem可勾选的弹出菜单'),
11        ),
12        body: DemoPage(),
13      ),
14    );
15  }
16}
17 
18//CheckedPopupMenuItem可勾选的弹出菜单，常常与PopupMenuButton，作为PopupMenuButton构造方法的元素
19 
20class DemoPage extends StatefulWidget {
21  DemoPage({Key key}) : super(key: key);
22 
23  @override
24  _DemoPageState createState() => _DemoPageState();
25}
26 
27class _DemoPageState extends State<DemoPage> {
28  List<String> _checkedValues;
29 
30  final String _checkedValue1 = '1';
31  final String _checkedValue2 = '2';
32  final String _checkedValue3 = '3';
33  final String _checkedValue4 = '4';
34 
35  @override
36  void initState() {
37    //初始化选中的值
38    _checkedValues = <String>[_checkedValue1];
39    super.initState();
40  }
41 
42  bool isChecked(String value) => _checkedValues.contains(value);
43 
44  //将选中的值保存在 _checkedValues 中
45  void showCheckedMenuSelections(String value) {
46    if (_checkedValues.contains(value)) {
47      _checkedValues.remove(value);
48    } else {
49      _checkedValues.add(value);
50    }
51  }
52 
53  @override
54  Widget build(BuildContext context) {
55    return Container(
56      color: Theme.of(context).primaryColor,
57      child: ListTile(
58        title: Text(
59          '有选择标题的弹出菜单',
60          style: TextStyle(color: Colors.white),
61        ),
62        trailing: PopupMenuButton<String>(
63          padding: EdgeInsets.zero,
64          onSelected: showCheckedMenuSelections,
65          icon: Icon(
66            Icons.menu,
67            color: Colors.white,
68          ),
69          itemBuilder: (BuildContext context) => [
70            CheckedPopupMenuItem<String>(
71              value: _checkedValue1,
72              //是否选中，通过 isChecked 判断 _checkedValues 中是否保存 _checkedValue1
73              checked: isChecked(_checkedValue1),
74              child: Text(_checkedValue1),
75            ),
76            CheckedPopupMenuItem<String>(
77              value: _checkedValue2,
78              //当前是否可选
79              enabled: false,
80              checked: isChecked(_checkedValue2),
81              child: Text(_checkedValue2),
82            ),
83            CheckedPopupMenuItem<String>(
84              value: _checkedValue3,
85              checked: isChecked(_checkedValue3),
86              child: Text(_checkedValue3),
87            ),
88            CheckedPopupMenuItem<String>(
89              value: _checkedValue4,
90              checked: isChecked(_checkedValue4),
91              child: Text(_checkedValue4),
92            ),
93          ],
94        ),
95      ),
96    );
97  }
98}

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！

Flutter笔记39：CheckedPopupMenuItem可勾选的弹出菜单

猜你喜欢