[Flutter combat]Menu function

Lao Meng's introduction: Today, I will introduce the menu function in Flutter.

PopupMenuButton

Use PopupMenuButton to pop up a menu when clicked. The usage is as follows:

PopupMenuButton<String>(
  itemBuilder: (context) {
    return <PopupMenuEntry<String>>[
      PopupMenuItem<String>(
        value: 'language',
        child: Text('language'),
      ),
      PopupMenuItem<String>(
        value: 'math',
        child: Text('math'),
      ),
      PopupMenuItem<String>(
        value: 'English',
        child: Text('English'),
      ),
      PopupMenuItem<String>(
        value: 'biology',
        child: Text('biology'),
      ),
      PopupMenuItem<String>(
        value: 'Chemical',
        child: Text('Chemical'),
      ),
    ];
  },
)

The effect is as follows:

Set its initial value:

PopupMenuButton<String>(
  initialValue: 'language',
  ...
)

After setting the initial value, after opening the menu, the set value will be highlighted, and the effect is as follows:

Get the value of an item selected by the user, or not selected by the user, the code is as follows:

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

The tooltip is a prompt that pops up when long-pressed. The usage is as follows:

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

The effect is as follows:

Set its shadow value, padding, and background color of the popup menu:

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

By default, PopupMenuButton displays 3 small dots, we can also set the alignment, the setting text is as follows:

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

The child component will be wrapped by InkWell, click the pop-up menu, the effect is as follows:

Other icons can also be set:

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

The effect is as follows:

Set the popup menu border:

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

The effect is as follows:

The menu has a very important parameter Offset, which controls the position where the menu pops up. Usually, the menu is displayed under the current button:

PopupMenuButton<String>(
  offset: Offset(0,100),
  itemBuilder: (context) {
    return <PopupMenuEntry<String>>[
      PopupMenuItem<String>(
        value: 'language',
        child: Text('language'),
      ),
      PopupMenuItem<String>(
        value: 'math',
        child: Text('math'),
      ),
    ];
  },
)

Each item of PopupMenuButton needs to be of type PopupMenuEntry. PopupMenuEntry is an abstract class, and its subclasses include PopupMenuItem, PopupMenuDivider, and CheckedPopupMenuItem.

PopupMenuItem

The constructor is

Parameter Description:

  • value: When this item is selected, this value will be returned by onSelected.
  • enabled: Whether this item is available.
  • height: the height of this item
  • textStyle: text style
  • child: child control.

The usage is as follows:

PopupMenuButton<String>(
  onSelected: (value) {
    print('$value');
  },
  itemBuilder: (context) {
    return <PopupMenuEntry<String>>[
      PopupMenuItem<String>(
        value: 'language',
        enabled: false,
        child: Text('language'),
      ),
      PopupMenuItem<String>(
        value: 'math',
        textStyle: TextStyle(color: Colors.red),
        child: Text('math'),
      ),
      PopupMenuItem<String>(
        value: 'English',
        height: 100,
        child: Text('English'),
      ),
    ];
  },
)

PopupMenuDivider

PopupMenuDivider is a menu divider, which is used as follows:

PopupMenuButton<String>(
  onSelected: (value) {
    print('$value');
  },
  itemBuilder: (context) {
    return <PopupMenuEntry<String>>[
      PopupMenuItem<String>(
        value: 'language',
        child: Text('language'),
      ),
      PopupMenuDivider(),
      PopupMenuItem<String>(
        value: 'math',
        child: Text('math'),
      ),
    ];
  },
)

The default height of PopupMenuDivider is 16. Note that this height is not the height of the dividing line, but the height of the dividing line control, which is set to 50 code:

PopupMenuDivider(height: 50,),

CheckedPopupMenuItem

CheckedPopupMenuItem is a control with whether the front is selected or not. It is essentially a ListTile. The usage is as follows:

PopupMenuButton<String>(
  onSelected: (value) {
    print('$value');
  },
  itemBuilder: (context) {
    return <PopupMenuEntry<String>>[
      CheckedPopupMenuItem(
        value: 'language',
        checked: true,
        child: Text('language'),
      ),
      CheckedPopupMenuItem(
        value: 'math',
        child: Text('math'),
      ),
    ];
  },
)

showMenu

If you look at the source code of PopupMenuButton, you will find that PopupMenuButton is also implemented using showMenu. The usage is as follows:

showMenu(
    context: context,
    position: RelativeRect.fill,
    items: <PopupMenuEntry>[
      PopupMenuItem(child: Text('language')),
      PopupMenuDivider(),
      CheckedPopupMenuItem(
        child: Text('math'),
        checked: true,
      ),
      PopupMenuDivider(),
      PopupMenuItem(child: Text('English')),
    ]);

The position parameter indicates the position of the popup, and the effect is as follows:

The properties are basically the same as PopupMenuButton, but using showMenu requires us to specify the position, so in general, we will not use showMenu directly, but use PopupMenuButton, which eliminates the process of calculating the position.

Looking at how PopupMenuButton is calculated will help us understand:

final PopupMenuThemeData popupMenuTheme = PopupMenuTheme.of(context);
    final RenderBox button = context.findRenderObject();
    final RenderBox overlay = Overlay.of(context).context.findRenderObject();
    final RelativeRect position = RelativeRect.fromRect(
      Rect.fromPoints(
        button.localToGlobal(widget.offset, ancestor: overlay),
        button.localToGlobal(button.size.bottomRight(Offset.zero), ancestor: overlay),
      ),
      Offset.zero & overlay.size,
    );
    final List<PopupMenuEntry<T>> items = widget.itemBuilder(context);

comminicate

Lao Meng Flutter blog address (330 control usage): http://laomengit.com

Welcome to join the Flutter exchange group (WeChat: laomengit), pay attention to the public account [Lao Meng Flutter]:

Tags: Flutter

Posted by phpmixx on Tue, 17 May 2022 22:56:10 +0300