• 赚钱入口【需求资源】限时招募流量主、渠道主,站长合作;【合作模式】CPS长期分成,一次推广永久有收益。主动打款,不扣量;

Flutter组件之PopupMenuButton

Flutter cps12345 10个月前 (02-15) 222次浏览 0个评论

PopupMenuButton

PopupMenuButton是一个菜单选中控件,用法如下:

PopupMenuButton<String>(
  itemBuilder: (context) {
    return <PopupMenuEntry<String>>[
      PopupMenuItem<String>(
        value: '语文',
        child: Text('语文'),
      ),
      PopupMenuItem<String>(
        value: '数学',
        child: Text('数学'),
      ),
      PopupMenuItem<String>(
        value: '英语',
        child: Text('英语'),
      ),
      PopupMenuItem<String>(
        value: '生物',
        child: Text('生物'),
      ),
      PopupMenuItem<String>(
        value: '化学',
        child: Text('化学'),
      ),
    ];
  },
)

效果如下:

Flutter组件之PopupMenuButton

设置其初始值:

PopupMenuButton<String>(
  initialValue: '语文',
  ...
)

设置初始值后,打开菜单后,设置的值将会高亮,效果如下:

获取用户选择了某一项的值,或者用户未选中,代码如下:

PopupMenuButton<String>(
  onSelected: (value){
    print('$value');
  },
  onCanceled: (){
    print('onCanceled');
  },
  ...
)

tooltip是长按时弹出的提示,用法如下:

PopupMenuButton<String>(
  tooltip: 'PopupMenuButton',
  ...
)

效果如下:

设置其阴影值、内边距和弹出菜单的背景颜色:

PopupMenuButton<String>(
  elevation: 5,
  padding: EdgeInsets.all(5),
  color: Colors.red,
  ...
)

默认情况下,PopupMenuButton显示3个小圆点,我们也可以对齐进行设置,设置文字如下:

PopupMenuButton<String>(
  child: Text('学科'),
  ...
)

child组件将会被InkWell包裹,点击弹出菜单,效果如下:

也可以设置其他图标:

PopupMenuButton<String>(
	icon: Icon(Icons.add),
	...
)

效果如下:

设置弹出菜单边框:

PopupMenuButton<String>(
  shape: RoundedRectangleBorder(
    side: BorderSide(
      color: Colors.red
    ),
    borderRadius: BorderRadius.circular(10)
  ),
	...
)

效果如下:

喜欢 (0)

您必须 登录 才能发表评论!