ボタンアセンブリのフラッター基本的なコンポーネント

マテリアルコンポーネントライブラリボタン

材料、部品ライブラリの提供に直接または間接的にRawMaterialButtonのカスタムコンポーネントのラッパーあるなど、ボタンRaisedButton、FlatButton、OutlineButton、などのコンポーネントのさまざまなので、その属性のほとんどとRawMaterialButton同じ。各種ボタンの導入では、まずそのデフォルトの外観を導入し、ボタンの外観は、ほとんどカスタマイズするには属性が、我々はこれらのプロパティ後に統一導入することができます。さらに以下のように、全てのマテリアルライブラリボタンは同じ点があります。

1.を押して、「波のアニメーション」(また、「リップルアニメーション」として知られているが、あなたがボタンをクリックしたときに水が表示されます波打つアニメーション化され)ています。
コールバックが実行されたときにコールバックがボタンを提供していない場合は財産onPressedコールバックボタンを押すと、設定する2.クリックが無効になっている、無効状態は、ユーザーがクリックに応答しません。
A、フラッターは、ボタンコンポーネントが導入された
部品がたくさんありフラッタボタンを、一般的なコンポーネントは、ボタンがあります。RaisedButton / FlatButton / IconButton /
OutlineButton / ButtonBarコントロール/ FloatingActionButtonのように。
RaisedButton:影でデフォルトと灰色の背景によって、ボタンを突き出し、実際には、材料設計のスタイルのボタン、

        RaisedButton(
          //icon: Icon(Icons.thumb_up),
              child: Text('按钮'),
              color: Colors.blue,
              onPressed: (){
                print('这是一个RD按钮');
              },
            ),

FlatButton:フラットボタンは、デフォルトでは背景が透明の網掛けされていません。押した後、背景色があるでしょう

        FlatButton(
          //icon: Icon(Icons.thumb_up),
              child: Text('按钮'),
              color: Colors.blue,
              onPressed: (){
                print('这是一个RD按钮');
              },
            ),

OutlineButton:ワイヤーフレームボタン、デフォルトでは影と透明な背景なしで、国境があります。プレス後、境界線の色が強調表示され、同時にバックグラウンドシェーディング(弱)

        OutlineButton(
          //icon: Icon(Icons.thumb_up),
              child: Text('按钮'),
              color: Colors.blue,
              onPressed: (){
                print('这是一个RD按钮');
              },
            ),

IconButton:アイコンボタン、テキストを含まないクリッカブルアイコン、デフォルトの背景はありませんが、背景には、クリック後に表示されます

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

ButtonBar:ボタングループ
FloatingActionButton:フローティング丸いボタン

アイコン付きボタン
:RaisedButton、FlatButton、OutlineButtonアイコンが示すように、容易に、アイコンとボタンによって作成することができるコンストラクタ有し、
ここに画像を挿入説明
次のようにコード:

RaisedButton.icon(
  icon: Icon(Icons.send),
  label: Text("发送"),
  onPressed: _onPressed,
),
OutlineButton.icon(
  icon: Icon(Icons.add),
  label: Text("添加"),
  onPressed: _onPressed,
),
FlatButton.icon(
  icon: Icon(Icons.info),
  label: Text("详情"),
  onPressed: _onPressed,
),

カスタムボタンの
外観は、その属性によって定義することができ、ボタン、別のボタンと同様の性質は、我々 FlatButton例、ボタンの一般的なプロパティを紹介、あなたはAPIドキュメントに関する詳細情報を表示することができます。
次のようにソースコードは次のとおりです。

const FlatButton({
  ...  
  @required this.onPressed, //按钮点击回调
  this.textColor, //按钮文字颜色
  this.disabledTextColor, //按钮禁用时的文字颜色
  this.color, //按钮背景颜色
  this.disabledColor,//按钮禁用时的背景颜色
  this.highlightColor, //按钮按下时的背景颜色
  this.splashColor, //点击时,水波动画中水波的颜色
  this.colorBrightness,//按钮主题,默认是浅色主题 
  this.padding, //按钮的填充
  this.shape, //外形
  @required this.child, //按钮的内容
})

**例:**青い背景、丸みを帯びたボタンの両側を画定します。図及ぼす影響:
ここに画像を挿入説明
サンプルコード:

FlatButton(
  color: Colors.blue,
  highlightColor: Colors.blue[700],
  colorBrightness: Brightness.dark,
  splashColor: Colors.grey,
  child: Text("Submit"),
  shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
  onPressed: () {},
)

上記のコードでは、丸みを帯びた長方形によって主外形を指定します。ボタンの背景が青(暗い)であるため、我々はボタンのテキストの色は光であることを確認することですBrightness.dark、などのボタンのトピックcolorBrightnessを指定する必要があります。

フラッターは、背景を削除するには、設定を提供していない、と我々は背景を削除する必要がある場合は、背景色を達成するのは完全に透明で設定することができます。上記のコードに対応し、それは色である:カラー(0×000000):Colors.blue色を置き換えます。

注意深い読者は、何のテクスチャが存在しないと思われる、([いいえ]をクリックした後)影なしのこのボタンを見つけることができます。示すように実際には、これは変更の効果の後に、(ここでは変更しない色)他のコードを変更しないでください、FlatButton上記の行にRaisedButtonを交換し、非常に簡単です:
ここに画像を挿入説明
デフォルト設定RaisedButton影があるので、この理由があります:

const RaisedButton({
  ...
  this.elevation = 2.0, //正常状态下的阴影
  this.highlightElevation = 8.0,//按下时的阴影
  this.disabledElevation = 0.0,// 禁用时的阴影
  ...
}

注:
影がマテリアルデザインスタイルで表現の非常に重要な形態であるため、材料、部品ライブラリでは、我々は多くのコンポーネントの上昇に関連するプロパティが表示されます、彼らは、影を制御するために使用されています

二、属性の一部でフラッタボタンコンポーネント:
onPressed
必要なパラメータ、コールバックはボタンが押されたときに、受信トリガ
ボタンを無効にする方法、パスヌルが無効に関連する表示されます
スタイルの
子供を:テキストコントロール
の、textColor:文字色
の色:ボタン色
disabledColor:カラーボタン無効
disabledTextColor:テキストカラーボタン無効
splashColor:ボタンの色モアレ
highlightColor:クリック(長押し)ボタンボタンの色
標高:網掛け範囲、値が大きいほど、より大きな斜線
パディング:パディング
形状:設定ボタンの形状、次のコードを、丸みを帯びた矩形:

shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
公開された13元の記事 ウォン称賛38 ビュー2556

おすすめ

転載: blog.csdn.net/m0_46369686/article/details/104626629