【Flutter actual combat】Menu function

Lao Meng's Guide: Today we will introduce the menu functions 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: '语文',
        child: Text('语文'),
      ),
      PopupMenuItem<String>(
        value: '数学',
        child: Text('数学'),
      ),
      PopupMenuItem<String>(
        value: '英语',
        child: Text('英语'),
      ),
      PopupMenuItem<String>(
        value: '生物',
        child: Text('生物'),
      ),
      PopupMenuItem<String>(
        value: '化学',
        child: Text('化学'),
      ),
    ];
  },
)

The effect is as follows:

Set its initial value:

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

After setting the initial value, open 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 the user has not selected it, the code is as follows:

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

tooltipIt is the prompt that pops up when you press and hold, the usage is as follows:

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

The effect is as follows:

Set the shadow value, padding and background color of the pop-up 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, set the text as follows:

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

childThe components will be wrapped by InkWell, click the pop-up menu, the effect is as follows:

You can also set other icons:

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

The effect is as follows:

Set the pop-up 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, this parameter is to control the pop-up position of the menu. Normally, the menu is displayed under the current button:

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

PopupMenuButtonEach item of needs to be a PopupMenuEntrytype, PopupMenuEntryan abstract class, and its subclasses are PopupMenuItem, PopupMenuDivider, and CheckedPopupMenuItem.

PopupMenuItem

The constructor is

Parameter Description:

• value: When this item is selected, this value will be onSelectedreturned through .
• 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: '语文',
        enabled: false,
        child: Text('语文'),
      ),
      PopupMenuItem<String>(
        value: '数学',
        textStyle: TextStyle(color: Colors.red),
        child: Text('数学'),
      ),
      PopupMenuItem<String>(
        value: '英语',
        height: 100,
        child: Text('英语'),
      ),
    ];
  },
)

PopupMenuDivider

PopupMenuDivider is a menu dividing line, the usage is as follows:

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

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. Set the code to 50:

PopupMenuDivider(height: 50,),

CheckedPopupMenuItem

CheckedPopupMenuItem is a control with whether or not it is selected in the front. The essence is a ListTile. The usage is as follows:

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

showMenu

If you look at PopupMenuButtonthe source code, you will find that it PopupMenuButtonis also implemented using showMenu. The usage is as follows:

showMenu(
    context: context,
    position: RelativeRect.fill,
    items: <PopupMenuEntry>[
      PopupMenuItem(child: Text('语文')),
      PopupMenuDivider(),
      CheckedPopupMenuItem(
        child: Text('数学'),
        checked: true,
      ),
      PopupMenuDivider(),
      PopupMenuItem(child: Text('英语')),
    ]);

positionThe parameter indicates the position of the pop-up, and the effect is as follows:

The attributes are PopupMenuButtonbasically the same, but the use showMenurequires us to specify the location, so in general, we will not use showMenuit directly , but use it PopupMenuButton, eliminating the process of calculating the location.

Look at PopupMenuButtonhow it is calculated, which helps 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);

communicate with

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

Welcome to join the Flutter exchange group (WeChat: laomengit) and follow the public account [Lao Meng Flutter]: