Auteur | Vlad
Source | Vlad (Compte public: fulade_me)
Style de matériel, il y a trois boutons couramment utilisés RaiseButton
, FlatButton
, OutlineButton
.
Ces trois boutons sont hérités MaterialButton
, et MaterialButton
ils héritent de StatelessWidget
.
RaiseButton: Un bouton avec un effet d'ombre, avec un fond gris par défaut, et en cliquant dessus aura un effet de clic et une ombre.
FlatButton: bouton de style plat, cliquez dessus pour avoir une couleur d'arrière-plan.
OutlineButton: un bouton avec une bordure, et la bordure change de couleur lorsque vous cliquez dessus.
1. RaisedButton
Regardons d'abord la RaisedButton
méthode de construction
const RaisedButton({
Key key,
/// 点击后的回调方法
@required VoidCallback onPressed,
/// 长按后的回调方法
VoidCallback onLongPress,
/// 高亮时候的回调方法
ValueChanged<bool> onHighlightChanged,
/// 鼠标指针的光标进入或悬停在此按钮(这个用于Web端或PC端)
MouseCursor mouseCursor,
/// 文本的主题,这个跟MaterialApp的属性theme有关
ButtonTextTheme textTheme,
/// 文本颜色
Color textColor,
/// 不可点击时的文本颜色
Color disabledTextColor,
/// 背景颜色
Color color,
/// 可点击时的背景颜色
Color disabledColor,
/// 获取焦点时的颜色(用于Web端或PC端)
Color focusColor,
/// 指鼠标悬停时的颜色(用于Web端或PC端)
Color hoverColor,
/// 高亮时的颜色
Color highlightColor,
/// 水波纹颜色,按下松开会有水波纹效果
Color splashColor,
/// 按钮主题颜色,默认浅色
Brightness colorBrightness,
/// 默认时的 阴影大小
double elevation,
/// 选中时的 阴影大小
double focusElevation,
/// 指鼠标悬停时的阴影大小
double hoverElevation,
/// 高亮时的阴影大小
double highlightElevation,
/// 不可选中时的阴影大小
double disabledElevation,
/// 内边距 跟布局有关
EdgeInsetsGeometry padding,
VisualDensity visualDensity,
/// 设置按钮的形状
ShapeBorder shape,
/// 切边的样式
Clip clipBehavior = Clip.none,
FocusNode focusNode,
bool autofocus = false,
MaterialTapTargetSize materialTapTargetSize,
/// 动画的时间
Duration animationDuration,
/// 子控件
Widget child,
})
1.1 L'un des RaisedButton les plus simples
RaisedButton(
child: Text("RaisedButton"),
onPressed: () {},
);
effet:
1.2 État non cliquable
RaisedButton(
child: Text("不设置onPressed"),
disabledColor: Colors.blue,
disabledTextColor: Colors.red,
);
Si vous ne définissez pas les onPressed
paramètres, la valeur par défaut n'est pas cliquable, bien sûr, nous pouvons toujours définir la couleur du texte et la couleur d'arrière-plan lorsqu'il n'est pas cliquable. Notez qu'il onPressed
s'agit d'un @required
paramètre, il n'est pas recommandé de ne pas passer ce paramètre.
1.3 Couleur du texte
RaisedButton(
child: Text("textColor红色"),
textColor: Colors.red,
onPressed: () {},
);
textColor
Vous pouvez définir la couleur du texte.
1.4 Définir la forme
RaisedButton(
onPressed: () {},
child: Text("椭圆形"),
shape: StadiumBorder(),
);
shape
La forme du bouton peut être définie par des paramètres. Les formes courantes sont le RoundedRectangleBorder
rectangle, le CircleBorder
cercle, l' StadiumBorder
ellipse BeveledRectangleBorder
et l'octogone.
1.5 Couleur d'arrière-plan
RaisedButton(
child: Text("背景颜色"),
color: Colors.red,
onPressed: () {},
);
color
La couleur de fond du bouton peut être définie en passant .
1.6 Couleurs de surbrillance
RaisedButton(
onPressed: () {},
child: Text("高亮红色"),
highlightColor: Colors.red,
);
Passez les highlightColor
paramètres pour définir la couleur une fois sélectionné.
1.7 Ondulation de l'eau rouge
RaisedButton(
onPressed: () {},
child: Text("水波纹红色"),
splashColor: Colors.red,
);
splashColor
Peut nous aider à définir la couleur de l'ondulation de l'eau après avoir cliqué.
1.8 Rappel de surbrillance
RaisedButton(
child: Text("高亮变化回调"),
onPressed: () {},
onHighlightChanged: (value) {
print("高亮切换");
},
);
onHighlightChanged
Vous pouvez recevoir une méthode de rappel, qui sera rappelée lorsque le bouton est enfoncé et mis en surbrillance.
1.9 Rappel par appui long
RaisedButton(
child: Text("长按回调"),
onPressed: () {},
onLongPress: () {
print("长按回调");
},
);
onLongPress
Vous pouvez recevoir une méthode de rappel à pression longue, qui sera rappelée lorsque le bouton est appuyé longuement.
1.10 Définir la taille de l'ombre
RaisedButton(
child: Text("阴影设置20"),
onPressed: () {},
elevation: 20.0,
);
elevation
Le paramètre peut définir la taille de l'ombre, l'ombre par défaut est relativement petite, vous pouvez définir une taille d'ombre plus grande via ce paramètre.
Si vous souhaitez expérimenter l'effet de fonctionnement du code ci-dessus, vous pouvez accéder à mon projet d' entrepôt Githubflutter_app
-> lib
-> routes
-> flat_button_page.dart
, vous pouvez le télécharger et l'exécuter et en faire l'expérience.
2. FlatButton
FlatButton
Les paramètres du constructeur RaisedButton
sont fondamentalement les mêmes que les paramètres et la méthode de réglage est la même.
const FlatButton({
Key key,
/// 点击后的回调
@required VoidCallback onPressed,
/// 长按后的回调
VoidCallback onLongPress,
/// 点击 高亮后的回调
ValueChanged<bool> onHighlightChanged,
/// 鼠标指针的光标进入或悬停在此按钮(这个用于Web端或PC端)
MouseCursor mouseCursor,
/// 文本的主题,这个跟MaterialApp的属性theme有关
ButtonTextTheme textTheme,
/// 文字颜色
Color textColor,
/// 不可点击时的文本颜色
Color disabledTextColor,
/// 背景颜色
Color color,
/// 不可点击时的背景颜色
Color disabledColor,
/// 获取焦点时的颜色(用于Web端或PC端)
Color focusColor,
/// 指鼠标悬停时的颜色(用于Web端或PC端)
Color hoverColor,
/// 高亮时的颜色
Color highlightColor,
/// 水波纹颜色,按下松开会有水波纹效果
Color splashColor,
/// 按钮主题颜色,默认浅色
Brightness colorBrightness,
/// 内边距 跟布局有关
EdgeInsetsGeometry padding,
VisualDensity visualDensity,
/// 按钮的形状
ShapeBorder shape,
/// 切边的样式
Clip clipBehavior = Clip.none,
FocusNode focusNode,
bool autofocus = false,
MaterialTapTargetSize materialTapTargetSize,
/// 子控件
@required Widget child,
})
2.1 L'un des FlatButton les plus simples
FlatButton(
child: Text("FlatButton"),
onPressed: () {},
);
On peut voir qu'en revanche RaisedButton
, le FlatButton
style plat par défaut.
2.2 Définir la forme
FlatButton(
onPressed: () {},
child: Text("椭圆形"),
shape: StadiumBorder(),
);
La forme shape
peut être définie en passant des paramètres FlatButton
. Il convient de noter que: la forme définie ne peut être vue que lorsque vous cliquez vers le bas.
Autre non-cliquez sur l'état, la couleur du texte, la couleur d'arrière-plan, la couleur de surbrillance, les ondulations de l'eau rouge, la correction de la surbrillance, le code de configuration de rappel de presse et d'autres états avec RaisedButton
la même configuration.
Si vous souhaitez expérimenter FlatButton
l'effet en cours d'exécution, vous pouvez accéder à mon projet de référentiel Githubflutter_app
-> lib
-> routes
-> flat_button_page.dart
, vous pouvez le télécharger et l'exécuter et en faire l'expérience.
3. OutlineButton
Regardons OutlineButton
le constructeur
const OutlineButton({
Key key,
/// 点击后的回调
@required VoidCallback onPressed,
/// 长按后的回调
VoidCallback onLongPress,
/// 鼠标指针的光标进入或悬停在此按钮(这个用于Web端或PC端)
MouseCursor mouseCursor,
/// 文本的主题,这个跟MaterialApp的属性theme有关
ButtonTextTheme textTheme,
/// 文字颜色
Color textColor,
/// 不可点击时的文本颜色
Color disabledTextColor,
/// 背景颜色
Color color,
/// 获取焦点时的颜色(用于Web端或PC端)
Color focusColor,
/// 指鼠标悬停时的颜色(用于Web端或PC端)
Color hoverColor,
/// 高亮时的颜色
Color highlightColor,
/// 水波纹颜色,按下松开会有水波纹效果
Color splashColor,
/// 高亮时的阴影大小
double highlightElevation,
/// 边框的延时
this.borderSide,
/// 不可用时 边框的颜色
this.disabledBorderColor,
/// 选中时边框的样色
this.highlightedBorderColor,
/// 内边距 跟布局有关
EdgeInsetsGeometry padding,
VisualDensity visualDensity,
/// 按钮的形状
ShapeBorder shape,
/// 切边的样式
Clip clipBehavior = Clip.none,
FocusNode focusNode,
bool autofocus = false,
/// 子控件
Widget child,
})
3.1 Bouton de contour simple
OutlineButton(
onPressed: () {},
child: Text("OutlineButton"),
);
Sa bordure est grise par défaut et elle devient bleue lorsque vous cliquez pour la sélectionner.
3.2 Style de bordure
OutlineButton(
child: Text("Border颜色"),
borderSide: BorderSide(color: Colors.red, width: 2),
highlightColor: Colors.yellow,
highlightedBorderColor: Colors.green,
onPressed: () {},
);
borderSide
Peut recevoir un BorderSide
objet, l'objet peut définir la couleur et la largeur, et nous pouvons également définir la couleur d'arrière-plan sélectionnée et la couleur de bordure sélectionnée en définissant highlightColor
et highlightedBorderColor
.
D'autres non-cliquez sur l'état, la couleur du texte, la couleur de surbrillance, les ondulations de l'eau rouge, la correction de la mise en évidence, le rappel de la presse et d'autres états définissent le code avec RaisedButton
la même configuration.
Si vous souhaitez expérimenter FlatButton
l'effet en cours d'exécution, vous pouvez accéder à mon projet de référentiel Githubflutter_app
-> lib
-> routes
-> outline_button_page.dart
, vous pouvez le télécharger et l'exécuter et en faire l'expérience.
4. IconButton
4.1 Bouton Icône Simple
IconButton(
icon: Icon(Icons.local_taxi),
onPressed: () {},
);
IconButton
Vous pouvez recevoir Icon
les paramètres d' une classe. Flutter est livré avec beaucoup de Icon
détails, voir ici
4.1 IconButton avec invite sélectionnée
IconButton(
icon: Icon(Icons.local_cafe),
tooltip: "Cafe Button",
color: Colors.red,
onPressed: () {},
);
En définissant les tooltip
propriétés, vous pouvez définir le texte de l'invite contextuelle lorsque vous appuyez sur le bouton. Cafe Button
Le texte que nous mettons ici .
4.2 IconButton pour les images personnalisées
IconButton(
icon: Image.asset("images/flutter_icon_100.png"),
onPressed: () {},
);
Nous pouvons également fournir un Image
type Icon
, afin que nous puissions définir différents boutons d'image.
Comme indiqué ci-dessous:
Si vous souhaitez expérimenter IconButton
l'effet en cours d'exécution, vous pouvez accéder à mon projet de référentiel Githubflutter_app
-> lib
-> routes
-> icon_button_page.dart
, vous pouvez le télécharger et l'exécuter et en faire l'expérience.
Ce qui précède est le bouton de style de matériau et une explication détaillée. Si vous voulez connaître le bouton de style de Cupertino, vous pouvez cliquer ici .
Dans la plupart de nos développements quotidiens, nous utiliserons des styles de style Material.