Flutter学习之旅-IconButton、PopupMenuButton

1.IconButton

  • IconButton widget上的图片,通过填充颜色来对触摸作出反应
  • 图标按钮通常在AppBar.actions字段中使用,但它们也可以用在其他地方
  • 如果尝试更改按钮颜色但是没有效果,请检查onPressed是否为null
class IconButtonDefault extends StatelessWidget {
  final bool isDisabled;

  const IconButtonDefault([this.isDisabled = true]):assert(isDisabled != null),super();

  @override
    Widget build(BuildContext context) {
      return IconButton(
        icon: Icon(Icons.volume_up),
        color: Colors.red,
        tooltip: 'Increase volume by 10%',
        onPressed: isDisabled ? (){}:null,
      );     
    }
}

2.PopupMenuButton

一个提供菜单栏弹出对话框按钮。

  • 点击的时候弹出菜单栏对话框,当选择其中一项后会调用onSelected方法。传递其所选的菜单项的值。
  • 可以提供一个child widget 或者提供一个icon给他。但是不能两者都提供;
  • 如果什么都没有提供给PopupMenuButton,则会根据运行平台创建一个overflow icon
  • PopupMenuButton通常配合PopupMenuItem一起使用
    -enabled 标识当前item是否可以点击
  • PopupMenuItem可以在child中传入带有icon的widget
  • 可以指定PopupMenuButton的初始值initialValue
class PopupMenuButttonDemo extends StatefulWidget {
   _PopupMenuButttonDemoState createState() => _PopupMenuButttonDemoState();
}

class _PopupMenuButttonDemoState extends State<PopupMenuButttonDemo> {
  final String _simpleValue1 = 'Menu item value one';
  final String _simpleValue2 = 'Menu item value Two';
  final String _simpleValue3 = 'Menu item value Three';
  String _simpleValue;

  void showMenuSelection(String value) {
    if(<String>[_simpleValue1,_simpleValue2,_simpleValue3].contains(value))
      _simpleValue = value;
    Scaffold.of(context).showSnackBar(
      SnackBar(
        content: Text('You selected: $value')
      )
    );
  }

  @override
  void initState() {
    super.initState();
    _simpleValue = _simpleValue2;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          ListTile(
            title: const Text('An item with a context menu button'),
            trailing: PopupMenuButton<String>(
              padding: EdgeInsets.zero,
              onSelected: showMenuSelection,
              itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
                PopupMenuItem<String>(
                  value: _simpleValue1,
                  child: Text('Context menu item one'),
                ),
                const PopupMenuItem<String>(
                  enabled: false,
                  child: Text('A disabled menu item'),
                ),
                PopupMenuItem<String>(
                  value: _simpleValue1,
                  child: Text('Context menu item Three'),
                )
              ],
            ),
          ),
          ListTile(
            title: const Text('An item with a sectiond menu'),
            trailing: PopupMenuButton<String>(
              padding: EdgeInsets.zero,
              onSelected: showMenuSelection,
              itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
                const PopupMenuItem<String>(
                  value: 'Preview',
                  child: ListTile(
                    leading: Icon(Icons.visibility),
                    title: Text('Preview'),
                  ),
                ),
                const PopupMenuItem<String>(
                  value: 'Share',
                  child: ListTile(
                    leading: Icon(Icons.person_add),
                    title: Text('Share'),
                  ),
                ),
                const PopupMenuItem<String>(
                  value: 'Get Link',
                  child: ListTile(
                    leading: Icon(Icons.link),
                    title: Text('Get link'),
                  ),
                ),
                const PopupMenuDivider(),
                const PopupMenuItem<String>(
                  value: 'Remove',
                  child: ListTile(
                    leading: Icon(Icons.delete),
                    title: Text('Remove'),
                  ),
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容