美文网首页
Flutter学习之旅-IconButton、PopupMenu

Flutter学习之旅-IconButton、PopupMenu

作者: Self_Time | 来源:发表于2019-06-27 15:09 被阅读0次

    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'),
                      ),
                    )
                  ],
                ),
              )
            ],
          ),
        );
      }
    }
    

    相关文章

      网友评论

          本文标题:Flutter学习之旅-IconButton、PopupMenu

          本文链接:https://www.haomeiwen.com/subject/brzlcctx.html