[フラッター1-17]フラッターハンズオンチュートリアルUIコントロール-[マルチイメージ警告] RaisedButton

モバイル 2020-12-30 17:30:40 訪問数: null

著者| Vlad
ソース| Vlad（パブリックアカウント：fulade_me）

マテリアルスタイルには、一般的に使用される3つのボタン、、、RaiseButtonがFlatButtonありOutlineButtonます。
これらの3つのボタンはMaterialButton、MaterialButtonから継承され、から継承されStatelessWidgetます。

RaiseButton：シャドウ効果のあるボタンで、デフォルトでは背景が灰色で、下にクリックするとクリック効果とシャドウが表示されます。
FlatButton：フラットスタイルのボタン。クリックすると背景色になります。
OutlineButton：境界線のあるボタンで、クリックすると境界線の色が変わります。

1. RaisedButton

まずはRaisedButton工法を見てみましょう

  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最も単純なRaisedButtonの1つ

RaisedButton(
    child: Text("RaisedButton"),
    onPressed: () {},
);

効果：
2020_12_17_rased_button_tap

1.2クリックできない状態

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

onPressedパラメータを設定しない場合、デフォルトはクリックできません。もちろん、クリックできない場合でも、テキストの色と背景の色を設定できます。これonPressedは@requiredパラメータであることに注意してください。このパラメータを渡さないことはお勧めしません。
2020_12_17_rased_button_no_onpressed
1.3テキストの色

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

textColorテキストの色を設定できます。
2020_12_17_rased_button_text_color

1.4形状を設定する

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

shapeボタンの形状を設定することができることにより、パラメータ共通形状であるRoundedRectangleBorder矩形、CircleBorder円形、StadiumBorder楕円形、BeveledRectangleBorder及び八角形。
2020_12_17_rased_button_shape

1.5背景色

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

colorボタンの背景色は、を渡すことで設定できます。
2020_12_17_rased_button_back_color

1.6ハイライトカラー

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

highlightColorパラメータを渡して、選択時に色を設定します。
2020_12_17_rased_button_height_color

1.7ウォーターリップルレッド

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

splashColorクリック後の水の波紋の色を設定するのに役立ちます。
2020_12_17_rased_button_splash_color
1.8ハイライトコールバック

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

onHighlightChangedボタンが押されて強調表示されるとコールバックされるコールバックメソッドを受け取ることができます。
1.9長押しコールバック

RaisedButton(
    child: Text("长按回调"),
    onPressed: () {},
    onLongPress: () {
        print("长按回调");
    },
);

onLongPressボタンを長押しするとコールバックされる長押しコールバックメソッドを受け取ることができます。

1.10影のサイズを設定する

RaisedButton(
    child: Text("阴影设置20"),
    onPressed: () {},
    elevation: 20.0,
);

elevationこのパラメーターはシャドウのサイズを設定できます。デフォルトのシャドウは比較的小さく、このパラメーターを使用してより大きなシャドウサイズを設定できます。
2020_12_17_rased_button_elevation

上記のコードの実行効果を体験したい場合は、私のGithubウェアハウスプロジェクトflutter_app-> lib-> routes->に移動しflat_button_page.dart、ダウンロードして実行し、体験することができます。

2.FlatButton

FlatButtonコンストラクターのパラメーターRaisedButtonは基本的にパラメーターと同じであり、設定方法も同じです。

  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最も単純なFlatButtonの1つ

FlatButton(
    child: Text("FlatButton"),
    onPressed: () {},
);

2020_12_17_flat_button_normal
対照的RaisedButtonに、FlatButtonデフォルトのフラットスタイルであることがわかります。

2.2形状の設定

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

shapeパラメータを渡すことでFlatButton形状を設定できます。注意：設定された形状は、クリックしたときにのみ表示されます。
2020_12_17_flat_button_shape
その他のクリックしないステータス、テキストの色、背景の色、ハイライトの色、赤い水の波紋、ハイライトの修正、プレスコールバックのセットアップコード、およびRaisedButton同じセットアップの他の状態。

FlatButton実行効果を体験したい場合は、私のGithubリポジトリプロジェクトflutter_app-> lib-> routes->に移動しflat_button_page.dart、ダウンロードして実行し、体験することができます。

3.アウトラインボタン

OutlineButtonコンストラクターを見てみましょう

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シンプルなアウトラインボタン

OutlineButton(
    onPressed: () {},
    child: Text("OutlineButton"),
);

デフォルトでは境界線は灰色で、クリックして選択すると青色に変わります。
2020_12_17_outline_button_normal
3.2ボーダースタイル

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

borderSide受け取ることができるBorderSideオブジェクトを、オブジェクトの色と幅を設定することができ、そして私たちもでき、選択した背景色と選択された境界線の色を設定し設定することによって、highlightColorおよびhighlightedBorderColor。

2020_12_17_outline_button_border

その他のクリックしないステータス、テキストの色、ハイライトの色、赤い水の波紋、ハイライトの修正、プレスコールバック、その他の状態はRaisedButton、同じ設定でコードを設定します。

FlatButton実行効果を体験したい場合は、私のGithubリポジトリプロジェクトflutter_app-> lib-> routes->に移動しoutline_button_page.dart、ダウンロードして実行し、体験することができます。

4. IconButton

4.1シンプルなIconButton

IconButton(
    icon: Icon(Icons.local_taxi),
    onPressed: () {},
);

IconButtonIconクラスのパラメータを受け取ることができます。FlutterにIconは多くの詳細が付属しています。4.1IconButtonと選択されたプロンプトを参照して
ください。

IconButton(
    icon: Icon(Icons.local_cafe),
    tooltip: "Cafe Button",
    color: Colors.red,
    onPressed: () {},
);

tooltipプロパティを設定することにより、ボタンが押されたときのポップアッププロンプトテキストを設定できます。ここで設定したCafe Buttonテキスト。
2020_12_18_icon_button_tool

4.2カスタム画像用のIconButton

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

Imageタイプを提供することもできるIconので、さまざまな画像ボタンを設定できます。
以下に示すように：
2020_12_18_icon_button_image

IconButton実行効果を体験したい場合は、私のGithubリポジトリプロジェクトflutter_app-> lib-> routes->に移動しicon_button_page.dart、ダウンロードして実行し、体験することができます。

上記はマテリアルスタイルボタンと詳細な説明です。クパチーノスタイルボタンについて知りたい場合は、ここをクリックしてください。
私たちの日常の開発のほとんどでは、マテリアルスタイルのスタイルを使用します。

公共

おすすめ

転載: blog.51cto.com/13824996/2566395
おすすめ
NetBSD は AI によって生成されたコードの提出を禁止します
ランキング
C＃の変数インスタンス、クレジット・カードケース
通过uniCloud白捡一个在线图库管理工具
Linuxのいくつかの基本的なコマンドに関する洞察（20ベース）
vueエントリーの基礎知識、コア知識をマスターするならこの記事で十分
食品化学クエスチョンバンク
CentOSの7制御システムは、ファイルを占めます
単一の el-form 内の el-form-item テキストの左揃えを解決する方法
ノードJSベースノート
関数にSQL Serverの文字列：
sparksql_相関分析
アーカイブ
もっと
2024-05-18(30)
2024-05-17(6)
2024-05-16(24)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)

コードワールド

© 2018 codetd.com