Guía de Lao Meng: Hoy presentaremos las funciones del menú en Flutter .
PopupMenuButton
Utilice PopupMenuButton para que aparezca un menú al hacer clic, el uso es el siguiente:
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('化学'),
),
];
},
)El efecto es el siguiente:
Establezca su valor inicial:
PopupMenuButton<String>(
initialValue: '语文',
...
)Después de configurar el valor inicial, abra el menú, el valor establecido se resaltará y el efecto es el siguiente:
Obtiene el valor de un artículo seleccionado por el usuario, o el usuario no lo ha seleccionado, el código es el siguiente:
PopupMenuButton<String>(
onSelected: (value){
print('$value');
},
onCanceled: (){
print('onCanceled');
},
...
)tooltipEs el mensaje que aparece cuando presiona y mantiene presionado, el uso es el siguiente:
PopupMenuButton<String>(
tooltip: 'PopupMenuButton',
...
)El efecto es el siguiente:
Configure el valor de la sombra, el relleno y el color de fondo del menú emergente:
PopupMenuButton<String>(
elevation: 5,
padding: EdgeInsets.all(5),
color: Colors.red,
...
)Por defecto, PopupMenuButton muestra 3 pequeños puntos, también podemos establecer la alineación, establecer el texto de la siguiente manera:
PopupMenuButton<String>(
child: Text('学科'),
...
)childInkWell envolverá los componentes, haga clic en el menú emergente, el efecto es el siguiente:
También puede configurar otros iconos:
PopupMenuButton<String>(
icon: Icon(Icons.add),
...
)El efecto es el siguiente:
Configure el borde del menú emergente:
PopupMenuButton<String>(
shape: RoundedRectangleBorder(
side: BorderSide(
color: Colors.red
),
borderRadius: BorderRadius.circular(10)
),
...
)El efecto es el siguiente:
El menú tiene un parámetro muy importante Offset, este parámetro es para controlar la posición emergente del menú. Normalmente, el menú se muestra debajo del botón actual:
PopupMenuButton<String>(
offset: Offset(0,100),
itemBuilder: (context) {
return <PopupMenuEntry<String>>[
PopupMenuItem<String>(
value: '语文',
child: Text('语文'),
),
PopupMenuItem<String>(
value: '数学',
child: Text('数学'),
),
];
},
)
PopupMenuButtonCada elemento de debe ser un PopupMenuEntrytipo, PopupMenuEntryuna clase abstracta y sus subclases son PopupMenuItem, PopupMenuDivider y CheckedPopupMenuItem.
PopupMenuItem
El constructor es
Descripción de parámetros:
- valor: cuando se selecciona este elemento, este valor se
onSelecteddevolverá mediante . - habilitado: si este elemento está disponible.
- altura: la altura de este artículo
- textStyle: estilo de texto
- niño: Control infantil.
El uso es el siguiente:
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 es una línea divisoria de menú, el uso es el siguiente:
PopupMenuButton<String>(
onSelected: (value) {
print('$value');
},
itemBuilder: (context) {
return <PopupMenuEntry<String>>[
PopupMenuItem<String>(
value: '语文',
child: Text('语文'),
),
PopupMenuDivider(),
PopupMenuItem<String>(
value: '数学',
child: Text('数学'),
),
];
},
)
La altura predeterminada de PopupMenuDivider es 16. Tenga en cuenta que esta altura no es la altura de la línea divisoria, sino la altura del control de la línea divisoria. Establezca el código en 50:
PopupMenuDivider(height: 50,),
CheckedPopupMenuItem
CheckedPopupMenuItem es un control con si se selecciona o no en el frente. La esencia es un ListTile. El uso es el siguiente:
PopupMenuButton<String>(
onSelected: (value) {
print('$value');
},
itemBuilder: (context) {
return <PopupMenuEntry<String>>[
CheckedPopupMenuItem(
value: '语文',
checked: true,
child: Text('语文'),
),
CheckedPopupMenuItem(
value: '数学',
child: Text('数学'),
),
];
},
)
Muestrame el menu
Si observa PopupMenuButtonel código fuente, verá que PopupMenuButtontambién se implementa mediante showMenu. El uso es el siguiente:
showMenu(
context: context,
position: RelativeRect.fill,
items: <PopupMenuEntry>[
PopupMenuItem(child: Text('语文')),
PopupMenuDivider(),
CheckedPopupMenuItem(
child: Text('数学'),
checked: true,
),
PopupMenuDivider(),
PopupMenuItem(child: Text('英语')),
]);positionEl parámetro indica la posición de la ventana emergente y el efecto es el siguiente:
Las propiedades son PopupMenuButtonbásicamente las mismas, pero el uso showMenunos obliga a especificar la ubicación, por lo que en general no la usaremos directamente showMenu, sino que la usaremos PopupMenuButton, eliminando el proceso de cálculo de la ubicación.
Mira PopupMenuButtoncómo se calcula, lo que nos ayuda a entender:
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);comunicarse con
Dirección del blog de Laomeng Flutter (uso de control 330): http://laomengit.com
Bienvenido a unirse al grupo de intercambio Flutter (WeChat: laomengit) y seguir la cuenta pública [Lao Meng Flutter]:
 |
 |