注：特に指定のない限り、フラッタバージョンとダートのバージョンは次の通りです：
- フラッターバージョン：1.12.13 + hotfix.5
- ダートバージョン：2.7.0
私たちがコントロールを使用するためフラッターはボタンの10種類以上（ボタン）クラスを構築し、これらのコントロールは、開発スピードの我々の理解を改善するのに役立ちます。
RaisedButton
RaisedButtonは、基本的な使い方を、ボタンを「バンプ」材料スタイルです。
RaisedButton(
child: Text('Button'),
onPressed: (){
},
)効果：
onPressednullであるかどうか設定し、ボタンが無効になっています。
onHighlightChanged非強調表示の状態で上げ、強調表示されている押されたときに、次のようにコールバックでのハイライトの変化に、使用されます。
RaisedButton(
onHighlightChanged: (high){
},
...
)フォントとさまざまな状態の色を設定するためのボタン、次のように要約：
| プロパティ | 説明 |
|---|---|
| テキストの色 | フォントの色 |
| disabledTextColor | 無効状態のフォントの色 |
| 色 | 背景色 |
| disabledColor | 障害者のための背景色 |
| highlightColor | ハイライトカラー、押された色 |
| splashColor | 水の波紋の色、水の波及効果は解除キーを押します |
次のようにの、textColorに、例えば、使用されています。
RaisedButton(
textColor: Colors.red,
...
)次のようにも使用され、textThemeによってフォントスタイルを設定することができます。
RaisedButton(
textTheme: ButtonTextTheme.primary,
...
)ButtonTextTheme値は以下に記載されています。
- 正常：黒または白のフォントに依存
ThemeData.brightness - アクセント：フォントの色に依存します
ThemeData.accentColor - 主：フォントの色はに依存します
ThemeData.primaryColor
次のようにこれらの3つの値が、MaterialAppグローバルなコントロールを提供されています。
MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primaryColor: Color(0xFF42A5F5),
accentColor: Colors.yellow,
brightness: Brightness.light
),
...
)[設定]ボタンシャドウ、ハイライトの影、無効影、次のように使用量は次のとおりです。
RaisedButton(
elevation: 5.0,
highlightElevation: 5.0,
disabledElevation: 5.0,
...
)shape設定は以下のような円形などのボタンの形状が、設けられています。
RaisedButton(
shape: CircleBorder(),
...
)結果は以下の通りであります：
そして、hover関連するプロパティは、マウスオーバー状態を指す移動端末が影響を及ぼさない、focus関連性は、フォーカス状態を取得します。
FlatButton
FlatButtonはフラットなボタンで、次のように、同じRaisedButtonを使用します。
FlatButton(
child: Text('Button'),
color: Colors.blue,
onPressed: () {},
)結果は以下の通りであります：
OutlineButton
次のようにOutlineButtonはボーダー、使用状況やRaisedButton同じコードを持つボタンです。
OutlineButton(
child: Text('Button'),
onPressed: () {},
)結果は以下の通りであります：
以下のように、提供された境界線のスタイル：
OutlineButton(
borderSide: BorderSide(color: Colors.blue,width: 2),
disabledBorderColor: Colors.black,
highlightedBorderColor: Colors.red,
child: Text('Button'),
onPressed: () {},
)結果は以下の通りであります： 
DropdownButton
次のようにDropdownButton選択ボタンのドロップダウンには、基本的な使い方は次のとおりです。
var _dropValue = '语文';
_buildButton() {
return DropdownButton(
value: _dropValue,
items: [
DropdownMenuItem(child: Text('语文'),value: '语文',),
DropdownMenuItem(child: Text('数学'),value: '数学'),
DropdownMenuItem(child: Text('英语'),value: '英语'),
],
onChanged: (value){
setState(() {
_dropValue = value;
});
},
);
}itemsポップアップオプションをクリックして、onChangedコールバックオプションの変更。結果は以下の通りであります：
オプションは、あなたが満たされていないスタイルを選択する場合は、次のように使用され、カスタマイズすることができます。
DropdownButton(
selectedItemBuilder: (context){
return [
Text('语文',style: TextStyle(color: Colors.red),),
Text('数学',style: TextStyle(color: Colors.red),),
Text('英语',style: TextStyle(color: Colors.red),)
];
},
...
)コンポーネントselectedItemBuilderはへと戻ったitems次のように、対応して選択されたスタイルを：
ユーザが選択されていない場合、すなわち、値がヌルである、「選択」を表示し、次のように使用されます。
DropdownButton(
hint: Text('请选择'),
value: null,
...
)結果は以下の通りであります：
アイコンのドロップダウンオプションが逆三角形で、デフォルトで、それはまた次のように使用し、カスタマイズすることができます。
DropdownButton(
icon: Icon(Icons.add),
iconSize: 24,
iconDisabledColor: Colors.red,
iconEnabledColor: Colors.red,
...
)結果は以下の通りであります：
RawMaterialButton
RawMaterialButtonが基づいてSemantics、MaterialおよびInkWellコンポーネントが作成され、それがカスタムボタンの現在のシステムテーマとボタンのトピックを使用するか、または既存のスタイルをマージしますが、RaisedButtonとFlatButtonは、システム構成RawMaterialButtonボタンのテーマと関連するトピックのプロパティに基づいていますされませんあなたはRaisedButton、本質的に同じパラメータを、以下の基本的な使用法を参照することができます。
RawMaterialButton(
onPressed: (){},
fillColor: Colors.blue,
child: Text('Button'),
)結果は以下の通りであります：
PopUpMenuButtonの
PopUpMenuButtonのは、以下を使用し、メニュー選択ウィジェットです。
PopupMenuButton<String>(
itemBuilder: (context) {
return <PopupMenuEntry<String>>[
PopupMenuItem<String>(
value: '语文',
child: Text('语文'),
),
PopupMenuItem<String>(
value: '数学',
child: Text('数学'),
),
PopupMenuItem<String>(
value: '英语',
child: Text('英语'),
),
PopupMenuItem<String>(
value: '生物',
child: Text('生物'),
),
PopupMenuItem<String>(
value: '化学',
child: Text('化学'),
),
];
},
)結果は以下の通りであります：
初期値を設定します。
PopupMenuButton<String>(
initialValue: '语文',
...
)初期値を設定した後、メニューを開き、設定値は以下のような効果があり、強調表示されます。
次のように、選択されていないユーザ、またはユーザによって選択された項目の値を取得します。
PopupMenuButton<String>(
onSelected: (value){
print('$value');
},
onCanceled: (){
print('onCanceled');
},
...
)tooltip次を使用し、長時間のポップアッププロンプトです。
PopupMenuButton<String>(
tooltip: 'PopupMenuButton',
...
)結果は以下の通りであります：
どの値をシェーディング背景色を設定して、ポップアップメニューのパディング：
PopupMenuButton<String>(
elevation: 5,
padding: EdgeInsets.all(5),
color: Colors.red,
...
)デフォルトでは、表示PopUpMenuButtonの弾丸3によって、我々は、整列設定することができます下のテキストを設定します。
PopupMenuButton<String>(
child: Text('学科'),
...
)childコンポーネントは、インク入れパッケージもポップアップメニューをクリックし、次のような効果があります。
あなたはまた、他のアイコンを設定することができます。
PopupMenuButton<String>(
icon: Icon(Icons.add),
...
)結果は以下の通りであります：
ポップアップメニューの境界線を設定します：
PopupMenuButton<String>(
shape: RoundedRectangleBorder(
side: BorderSide(
color: Colors.red
),
borderRadius: BorderRadius.circular(10)
),
...
)結果は以下の通りであります：
IconButton
IconButtonは、次のようにボタンが使用されているアイコンです。
IconButton(
icon: Icon(Icons.person),
iconSize: 30,
color: Colors.red,
onPressed: () {},
)プロンプトのプロパティを設定します。
IconButton(
tooltip: '这是一个图标按钮',
icon: Icon(Icons.person),
iconSize: 30,
color: Colors.red,
onPressed: () {},
)ときに長い時間が表示され、次のようにプロンプト効果は次のとおりです。
戻るボタン
戻るボタンの材料を使用すると、クリックしたときに戻るボタンのスタイル自体はIconButton、デフォルト実行されているNavigator.maybePopルーティングスタックは、前のページに前のリターンを持っている場合、それを。
BackButton()AndroidとiOSプラットフォームが表示されるアイコンは次のようIOS効果があり、同じではありません。
次のようにAndroidの効果は次のとおりです。
CloseButton
CloseButton材料は、スタイルクローズボタン自体はあなたがクリックIconButton、デフォルトの実行であるNavigator.maybePopルーティングスタックは、前のページへ前のページに戻りを持っている場合、それを。
そして、戻るボタン異なるアプリケーションシナリオ、戻るボタンがポップアップダイアログに適したフルスクリーンのページ、CloseButtonに適用されます。
次のように使用方法は以下のとおりです。
CloseButton()結果は以下の通りであります：
ButtonBar
ボタンが一体周り代わりラッピング、垂直に配置されたときに、横方向に十分なスペースがないのButtonBarない単一のボタンコントロールが、配向制御用コンテナクラスの終わり、。次のように基本的な使い方は次のとおりです。
ButtonBar(
children: <Widget>[
RaisedButton(),
RaisedButton(),
RaisedButton(),
RaisedButton(),
],
)結果は以下の通りであります：
スピンドルとスピンドルアライメント寸法を設定します。
ButtonBar(
alignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
...
)結果は以下の通りであります：
！[画像-20200315172816904]（/ユーザ/ mengqingdong /ライブラリ/ Application Support / typora-ユーザー画像/画像20200315172816904.png）
トグルボタン
一緒にトグルボタンコンポーネント複数のコンポーネントを、ユーザーが選択できるよう、トグルボタン基本的な使用方法は次のとおりです。
List<bool> _selecteds = [false, false, true];
ToggleButtons(
isSelected: _selecteds,
children: <Widget>[
Icon(Icons.local_cafe),
Icon(Icons.fastfood),
Icon(Icons.cake),
],
onPressed: (index) {
setState(() {
_selecteds[index] = !_selecteds[index];
});
},
);isSelectedブール値プロパティは、コレクション型であり、同じ子供の数、およびonPressedコールバックをクリックすると、その後、ボタントグル良好なラインがあり、次のように、効果は次のとおりです。
我々はまた、このようなボタンの色を設定するなど、外観をカスタマイズすることができます。
ToggleButtons(
color: Colors.green,
selectedColor: Colors.orange,
fillColor: Colors.red,
...
)結果は以下の通りであります：
fillColorボタンは、背景色を選択しています。
何の境界線ができる場合はrenderBorderfalseに設定されていません。
ToggleButtons(
renderBorder: false,
)結果は以下の通りであります：
もちろん、我々は国境フィレット半径、幅、色を設定することができます。
ToggleButtons(
borderRadius: BorderRadius.circular(30),
borderColor: Colors.orange,
borderWidth: 3,
selectedBorderColor: Colors.deepOrange,
）結果は以下の通りであります：
あなたも色（splashColor）とハイライトカラー（highlightColor）を押して設定することができ、リップルクリックしてください。
ToggleButtons(
splashColor: Colors.purple,
highlightColor: Colors.yellow,
）結果は以下の通りであります：
ボタンが無効になっている場合は、ボタンや無効な状態の境界線の色を設定することができます。
ToggleButtons(
onPressed: null,
disabledColor: Colors.grey[300],
disabledBorderColor: Colors.blueGrey,
)結果は以下の通りであります：
あなたは、Webアプリケーションを開発している場合、我々は、マウスオーバーの色を設定することができます。
ToggleButtons(
hoverColor: Colors.cyan,
)フラッターマイクロ手紙交換基（へようこそmqd_zzy）、一緒に学び、一緒に進行、苦労よりも目の前でのライブだけでなく、詩や「遠いです。」
もちろん、私の個人的な公共の番号にご関心は、ああ、あなたを待ってのさまざまなメリットがあることを、私も非常に多くの希望。
