This is the first day of my participation in the Gwen Challenge in November. Check out the details: the last Gwen Challenge in 2021

The small dish needs to deal with the title bar pop-up dialog box PopupMenu style. Of course, Flutter provides some processing methods, like PopupMenuEntry and so on. The small dish only learns and organizes the most basic usage methods.

PopupMenuItem basic style

PopupMenuItem is a popup style for a single item. By default, it is 48px high and can be customized as required. You can customize the required styles in item, including a series of styles such as text and pictures.

@override
Widget build(BuildContext context) {
  return new Scaffold(
      appBar: AppBar(
        title: Text('PopMenuDemo'),
        actions: <Widget>[_NomalPopMenu()],
      ),
      body: Center(child: new Text(_bodyStr)));
}

Widget _NomalPopMenu() {
  return new PopupMenuButton<String>(
      itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
            new PopupMenuItem<String>(
                value: 'value01', child: new Text('Item One')),
            new PopupMenuItem<String>(
                value: 'value02', child: new Text('Item Two')),
            new PopupMenuItem<String>(
                value: 'value03', child: new Text('Item Three')),
            new PopupMenuItem<String>(
                value: 'value04', child: new Text('I am Item Four'))
          ],
      onSelected: (String value) {
        setState(() { _bodyStr = value; });
      });
}
Copy the code

      Tips:If you need to deal with the style with ICONS, provided on the official websiteDemoIs with the aid of theListTileTo process, but the small dish test found that the icon and text distance is large, the reason lies inListTileDefault left iconleadingThe distance cannot be adjusted directlyRowOr other ways to adjust.

// ListTile style new PopupMenuItem<String>(value: 'value01', child: ListTile(leading: Icon(Icons. Looks_one), title: Text('Item One'))),Copy the code

New PopupMenuItem<String>(value: 'value01', child: Row(children: <Widget>[Padding(Padding: EdgeInsets. FromLTRB (0.0, 0.0, 8.0, 0.0), Child: Icon(icon.looks_one)), Text('Item One')]),Copy the code

CheckedPopupMenuItem Selects the style

CheckedPopupMenuItem is a pop-up menu item with check marks. The default height is also 48px, and the horizontal layout using the ListTile check mark is the icons. done icon, displayed in the leading position; The icon is displayed only when the status is selected.

Widget _CheckPopMenu() {
  return new PopupMenuButton<String>(
      itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
            new CheckedPopupMenuItem<String>(
                checked: false, value: 'value01', child: new Text('Item One')),
            new CheckedPopupMenuItem<String>(
                checked: true, value: 'value02', child: new Text('Item Two')),
            new CheckedPopupMenuItem<String>(
                checked: false, value: 'value03', child: new Text('Item Three')),
            new CheckedPopupMenuItem<String>(
                checked: false, value: 'value04', child: new Text('I am Item Four'))
          ],
      onSelected: (String value) {
        setState(() { _bodyStr = value; });
      });
}
Copy the code

PopupMenuDivider line

PopupMenuDivider is a horizontal divider. Note that the PopupMenuEntry parent class is used in conjunction with other item styles. The PopupMenuDivider can adjust the height, but not the color, so you can customize it as needed.

Widget _DividerPopMenu() { return new PopupMenuButton<String>( itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[ new PopupMenuItem<String>( value: 'value01', child: New Text('Item One')), new PopupMenuDivider(height: 1.0), new PopupMenuItem<String>(value: 'value02', child: New Text('Item Two')), new PopupMenuDivider(height: 1.0), new PopupMenuItem<String>(value: 'value03', child: New Text('Item Three')), new PopupMenuDivider(height: 1.0), new PopupMenuItem<String>(value: 'value04', child: new Text('I am Item Four')) ], onSelected: (String value) { setState(() { _bodyStr = value; }); }); }Copy the code

ShowMenu specifies the location

The default PopupMenu position is in the upper right corner and blocks the title bar. If PopupMenu needs to be in other positions, you need to use showMenu to locate the PopupMenu position.

      menuThe width and height are related to the content. The understanding of side dishes is that they will be set in horizontal and vertical directionspositionLocation andmenuWidth and height, then match the screen, and exceed the screen width and height, according topositionIn accordance with theLTRBThe sequence is displayed close to the screen border.

onTap: () async {
  final result = await showMenu(
    context: context,
    position: RelativeRect.fromLTRB(100.0, 200.0, 100.0, 100.0),
//    position: RelativeRect.fromLTRB(1000.0, 1000.0, 0.0, 10.0),
    items: <PopupMenuItem<String>>[
      new PopupMenuItem<String>( value: 'value01', child: new Text('Item One')),
      new PopupMenuItem<String>( value: 'value02', child: new Text('Item Two')),
      new PopupMenuItem<String>( value: 'value03', child: new Text('Item Three')),
      new PopupMenuItem<String>( value: 'value04', child: new Text('I am Item Four'))
    ] );
},
Copy the code

      Tips: Don’t worry if there are too many items. Flutter supports more than screen slides by default.

The current learning of xiao CAI is limited to the basic use, and advanced customization is rarely involved. If there is something wrong, I hope to point out more.

Source: Little Monk A Ce