[Flutter 1-17] Contrôles de l'interface utilisateur du didacticiel Flutter - [avertissement multi-image] RaisedButton

Mobile 2020-12-30 17:30:55 views: null

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 MaterialButtonils 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 RaisedButtonmé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:
2020_12_17_rased_button_tap

1.2 État non cliquable

RaisedButton(
    child: Text("不设置onPressed"),
    disabledColor: Colors.blue,
    disabledTextColor: Colors.red,
);

Si vous ne définissez pas les onPressedparamè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 onPresseds'agit d'un @requiredparamètre, il n'est pas recommandé de ne pas passer ce paramètre.
2020_12_17_rased_button_no_onpressed
1.3 Couleur du texte

RaisedButton(
    child: Text("textColor红色"),
    textColor: Colors.red,
    onPressed: () {},
);

textColorVous pouvez définir la couleur du texte.
2020_12_17_rased_button_text_color

1.4 Définir la forme

RaisedButton(
    onPressed: () {},
    child: Text("椭圆形"),
    shape: StadiumBorder(),
);

shapeLa forme du bouton peut être définie par des paramètres. Les formes courantes sont le RoundedRectangleBorderrectangle, le CircleBordercercle, l' StadiumBorderellipse BeveledRectangleBorderet l'octogone.
2020_12_17_rased_button_shape

1.5 Couleur d'arrière-plan

RaisedButton(
    child: Text("背景颜色"),
    color: Colors.red,
    onPressed: () {},
);

colorLa couleur de fond du bouton peut être définie en passant .
2020_12_17_rased_button_back_color

1.6 Couleurs de surbrillance

RaisedButton(
    onPressed: () {},
    child: Text("高亮红色"),
    highlightColor: Colors.red,
);

Passez les highlightColorparamètres pour définir la couleur une fois sélectionné.
2020_12_17_rased_button_height_color

1.7 Ondulation de l'eau rouge

RaisedButton(
    onPressed: () {},
    child: Text("水波纹红色"),
    splashColor: Colors.red,
);

splashColorPeut nous aider à définir la couleur de l'ondulation de l'eau après avoir cliqué.
2020_12_17_rased_button_splash_color
1.8 Rappel de surbrillance

RaisedButton(
    child: Text("高亮变化回调"),
    onPressed: () {},
    onHighlightChanged: (value) {
        print("高亮切换");
    },
);

onHighlightChangedVous 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("长按回调");
    },
);

onLongPressVous 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,
);

elevationLe 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.
2020_12_17_rased_button_elevation

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

FlatButtonLes paramètres du constructeur RaisedButtonsont 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: () {},
);

2020_12_17_flat_button_normal
On peut voir qu'en revanche RaisedButton, le FlatButtonstyle plat par défaut.

2.2 Définir la forme

FlatButton(
    onPressed: () {},   
    child: Text("椭圆形"),
    shape: StadiumBorder(),
);

La forme shapepeut ê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.
2020_12_17_flat_button_shape
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 RaisedButtonla même configuration.

Si vous souhaitez expérimenter FlatButtonl'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 OutlineButtonle 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.
2020_12_17_outline_button_normal
3.2 Style de bordure

OutlineButton(
    child: Text("Border颜色"),
    borderSide: BorderSide(color: Colors.red, width: 2),
    highlightColor: Colors.yellow,
    highlightedBorderColor: Colors.green,
    onPressed: () {},
);

borderSidePeut recevoir un BorderSideobjet, 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 highlightColoret highlightedBorderColor.

2020_12_17_outline_button_border

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 RaisedButtonla même configuration.

Si vous souhaitez expérimenter FlatButtonl'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: () {},
);

IconButtonVous pouvez recevoir Iconles paramètres d' une classe. Flutter est livré avec beaucoup de Icondé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 tooltippropriétés, vous pouvez définir le texte de l'invite contextuelle lorsque vous appuyez sur le bouton. Cafe ButtonLe texte que nous mettons ici .
2020_12_18_icon_button_tool

4.2 IconButton pour les images personnalisées

IconButton(
    icon: Image.asset("images/flutter_icon_100.png"),
    onPressed: () {},
);

Nous pouvons également fournir un Imagetype Icon, afin que nous puissions définir différents boutons d'image.
Comme indiqué ci-dessous:
2020_12_18_icon_button_image

Si vous souhaitez expérimenter IconButtonl'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.

le public

Je suppose que tu aimes

Origine blog.51cto.com/13824996/2566395
conseillé
Classement
du quotidien
Plus
2024-08-26(0)
2024-08-25(0)
2024-08-24(0)
2024-08-23(0)
2024-08-22(0)
2024-08-21(0)
2024-08-20(0)
2024-08-19(0)
2024-08-18(0)
2024-08-17(0)

Code World

© 2018 codetd.com