Una breve introducción al componente de botón Raisebutton\ FlatButton\ OutlineButton botón de los componentes básicos de Flutter
Componente de botón El componente de botón es uno de los componentes más utilizados para la interacción en las aplicaciones. La biblioteca MaterialWidget proporciona una variedad de widgets de botón, como RaisedButton (componente de botón en relieve), FlatButton (componente de botón plano) y OutlineButton (botón bordeado) Componentes ), etc., todos se empaquetan directa o indirectamente y se personalizan en RawMaterialButton para formar diferentes estilos de apariencia, por lo que sus propiedades y métodos de uso son básicamente los mismos.
| nombre de la propiedad | Tipos de | ilustrar |
|---|---|---|
| color | Color | establecer el color del botón |
| color de texto | Color | Establezca el color del texto en el botón, lo que surte efecto cuando la propiedad onPressed no es nula |
| deshabilitadoTextColor | Color | Establece el color del texto cuando el botón está deshabilitado. Los valores predeterminados son colores deshabilitados en el tema. |
| color deshabilitado | Color | Establece el color del botón cuando está deshabilitado. Los valores predeterminados son colores deshabilitados en el tema. |
| onPressed | Devolución de llamada nula | Establece la devolución de llamada para que se active cuando se presiona el botón. Si el valor de la propiedad es nulo, significa que el botón está deshabilitado y se mostrarán los estilos relacionados. |
| niño | Widget | Establezca el componente que se muestra en el botón. Normalmente, un componente de texto. |
| habilitar | bool | Establezca si el botón está disponible. El valor por defecto es verdadero |
| splashcColor | Color | Establecer el color de la ondulación del agua cuando se hace clic en el botón |
| resaltarColor | Color | Establecer el color del botón después de una pulsación larga |
| elevación | doble | Establezca el rango de sombra. Cuanto mayor sea el valor, mayor será el rango de sombra |
| relleno | EdgeInsetsGeometry | conjunto de relleno |
| forma | FormaBorde | Establecer la forma del botón |
| minAncho | doble | Establecer el ancho mínimo del botón |
| altura | doble | Establecer la altura del botón |
| colorBrillo | Brillo | Configure el botón para resaltar. El valor puede ser Brillo.claro o Brillo.oscuro |
1. Botón subir
El botón RaisedButton tiene una sombra y un fondo gris de forma predeterminada, y la sombra se oscurecerá gradualmente cuando se presione.
A continuación se enumeran 8 tipos de códigos de implementación del botón Raisebutton, y los lectores pueden aplicar estos códigos
a escenarios reales de desarrollo de aplicaciones con ligeros cambios.
(1) Botón predeterminado
(2) Botón con texto, color de fondo
(3) Botón deshabilitado con texto, color de fondo
(4) Botón con color de ondas de agua al presionar
(5) Botón con resaltado de tema
(6 ) ) con el botón de tamaño de sombra a continuación
(7) con el código del botón de sombra cuando se resalta
(8) con el botón de evento de devolución de llamada de cambio de resaltado de ondas de agua
Crea dos botones
RaisedButton(
onPressed: () {
},
child: Text('确定'),
),
RaisedButton(
onPressed: () {
},
child: Text('取消'),
)
textColor: Colors.blue,//按钮中文本的颜色
highlightColor: Colors.red,//长按按钮后的颜色
El efecto de onda de agua después de presionar el botón;
splashColor: Colors.yellow,
Haga clic para ver el efecto de vídeo
otras propiedades
colorBrightness:Brightness.light ,//带有主题高亮的按钮颜色
elevation: 10,//带阴影
highlightElevation: 50,//带阴影的高亮按钮
RaisedButton(
onPressed: () {
},
child: Text('确定'),
textColor: Colors.blue,//按钮中文本的颜色
splashColor: Colors.yellow,//长按按钮后的水波效果
colorBrightness:Brightness.light ,//带有主题高亮的按钮颜色
elevation: 10,//带阴影
highlightElevation: 50,//带阴影的高亮按钮
/*带水波纹高亮变化回调的方法*/
onHighlightChanged:(b){
print(b);
} ,
),
Presione para devolver verdadero, suelte para devolver falso
2. Botón plano
El botón FlatButton tiene un fondo transparente y sin sombra por defecto, y tendrá un color de fondo cuando se presione.
FlatButton(onPressed: () {
}, child: Text('三阿哥')),
Botón FlatButton
Después de presionar (cambiado)
3. Botón de esquema
El botón OutlineButton no tiene sombra por defecto y tiene un fondo transparente. Después de presionar, el color del borde
se vuelve más brillante y el fondo y la sombra aparecen al mismo tiempo.
Botón de esquema
Después de presionar (cambiado)
OutlineButton(
onPressed: () {
},
child: Text('四阿哥'),
borderSide: BorderSide(color:Colors.blue,//设置边框颜色
width:5,//边框粗细
style: BorderStyle.solid//边框的线性
),
Código completo:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class agesuopage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return MyState();
}
}
class MyState extends State {
@override
String info = '初始化';
TextEditingController controller = TextEditingController();
void getvalue() {
setState(() {
info = controller.text;
});
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('阿哥所'),
centerTitle: true,
),
body: Column(
children: [
TextField(
controller: controller,
),
Text(info),
RaisedButton(
onPressed: () {
},
child: Text('确定'),
textColor: Colors.blue, //按钮中文本的颜色
// highlightColor: Colors.red,//长按按钮后的颜色
splashColor: Colors.yellow, //长按按钮后的水波效果
colorBrightness: Brightness.light, //带有主题高亮的按钮颜色
elevation: 10, //带阴影
highlightElevation: 50, //带阴影的高亮按钮
/*带水波纹高亮变化回调的方法*/
onHighlightChanged: (b) {
print(b);
},
),
RaisedButton(
onPressed: () {
},
child: Text('取消'),
// disabledColor:Colors.yellow,
),
FlatButton(onPressed: () {
}, child: Text('三阿哥')),
OutlineButton(
onPressed: () {
},
child: Text('四阿哥'),
borderSide: BorderSide(color:Colors.blue,//设置边框颜色
width:5,//边框粗细
style: BorderStyle.solid//边框的线性
),
)
],
),
floatingActionButton: FloatingActionButton(
onPressed: () {
getvalue();
}, //设置点击事件，点击按钮，将文本值送到下面info
child: Text('背书'),
),
);
}
}