フラッタボタンの種類と機能

こんにちは、このレッスンでは、我々は最も使用されるフラッタボタンの種類とその機能について話します.Flutterでアプリケーションを開発するとき、我々が最初にそれを開くとき、我々が始める例から始めることができます.画面の右下隅にあるボタンをクリックすると、画面の中央にある番号に+ 1をクリックします.実際には、この例で使用するボタン型をフローティングボタンという.


浮動アクションボタン
他のボタンとは異なり、それはScaffold . 体の外側で使用する場合は、小文字を開始し、その位置が自動的に画面の右下隅にあります.例えば、

floatingActionButton: FloatingActionButton(
  onPressed: _incrementCounter,
  tooltip: 'Increment',
  child: const Icon(Icons.add),
),

我々が体の中でそれを使うならば、我々は必要に応じてポジショニングをすることができます.今回は大文字で始まります.
すべてのボタンが単一のウィジェットを取ることができるので、それは子を使用します.私たちは私たちが欲しいウィジェットを追加することができます.コードを通過し、フローティングアクションボタンの機能を調べてみましょう.

floatingActionButton: FloatingActionButton(
  splashColor: Colors.blueAccent,
  backgroundColor: Colors.redAccent,
  onPressed: () {
    debugPrint("Button clicked!");
  },
  tooltip: 'Increment',
  child: const Icon(Icons.add),
),

上のコードを調べると、ウィジェットウィジェットにアイコンウィジェットを置いたことがわかります.背景色をbackgroundColor ; ボタンを押しながら、我々は色を決定することができますsplashColor . ツールチップは、ボタンを押し続けると情報を提供する部分ですが、画面に表示されますので、短い時間で画面に反映されます.With onPressed , 我々は、クリック機能を与える.floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,インサイドScaffold , 上記のコードで、体の外側に;私たちはFloating Action Button 中央へ.

floatingActionButton: FloatingActionButton(
  backgroundColor: Colors.pinkAccent,
  onPressed: () {
    debugPrint("Button clicked!");
  },
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
  tooltip: 'Increment',
  child: const Icon(Icons.insert_emoticon),
)

だから、フローティングアクションボタンは常にラウンドですか?いいえ、我々はそれが形で欲しいように、絵のようにそれを形作ることができます.

上昇ボタン
このポストを私のブログに続けてください!Flutter Button Types and Features .