一、Button Widget
按鈕是開發(fā)中常用的可與用戶交互的組件，在 Flutter 中，提供了很多跟按鈕相關(guān)的 Widget 。
1. MaterialButton
MaterialButton 是用來(lái)構(gòu)建一個(gè)依賴于 ButtomTheme 和 Theme 的實(shí)用工具類。其實(shí)現(xiàn)了按鈕的基本需求功能，但是官方不建議直接使用此類來(lái)創(chuàng)建按鈕，此類多用于定時(shí)和按鈕 Widget 的基類。 應(yīng)該盡量使用其提供的三個(gè)子類來(lái)創(chuàng)建，三個(gè)子類分別為：RaisedButton 、FlatButton 、OutlineButton 。這三個(gè)子類實(shí)現(xiàn)了 Material Design 設(shè)計(jì)風(fēng)格的默認(rèn)參數(shù)設(shè)置。MaterialButton 繼承自 StatelessWidget ，為無(wú)狀態(tài) Widget， 其構(gòu)造方法如下：
const MaterialButton({
Key key,
//Function類型必傳參數(shù)，為當(dāng)按鈕點(diǎn)擊時(shí)的回調(diào)方法，如果為null，按鈕將處于禁用狀態(tài)
@required this.onPressed,
//Function類型可選命名參數(shù)，為當(dāng)長(zhǎng)按按鈕時(shí)的回調(diào)方法
this.onLongPress,
//Function類型可選命名參數(shù)，為當(dāng)按鈕突出(高亮)顯示或停止突出顯示時(shí)調(diào)用的回調(diào)方法，參數(shù)bool類型
this.onHighlightChanged,
//ButtonTextTheme類型可選命名參數(shù)，用來(lái)定義按鈕的基本顏色，最小尺寸，內(nèi)部填充和形狀的默認(rèn)值
this.textTheme,
//Color類型可選命名參數(shù)，為按鈕文本的顏色
this.textColor,
//Color類型可選命名參數(shù)，為按鈕禁用時(shí)的按鈕文本的顏色
this.disabledTextColor,
//Color類型可選命名參數(shù)，按鈕狀態(tài)為可用時(shí)且未被點(diǎn)擊時(shí)的填充色
this.color,
//Color類型可選命名參數(shù)，為按鈕禁用時(shí)的按鈕填充顏色
this.disabledColor,
//Color類型可選命名參數(shù)，當(dāng)按鈕具有輸入焦點(diǎn)時(shí)的填充顏色
this.focusColor,
//Color類型可選命名參數(shù)，指針懸停在按鈕上時(shí)的填充顏色
this.hoverColor,
//Color類型可選命名參數(shù)，用于設(shè)置按鈕的高亮顏色
this.highlightColor,
//Color類型可選命名參數(shù)，按鈕點(diǎn)擊時(shí)水波紋效果的顏色
this.splashColor,
//Brightness類型可選命名參數(shù)，用于設(shè)置按鈕的主題亮度
this.colorBrightness,
//double類型可選命名參數(shù)，相對(duì)于其父級(jí)放置此按鈕的z坐標(biāo)，可用于控制凸起按鈕下方的
//陰影大小，默認(rèn)值為2，不能為負(fù)數(shù)
this.elevation,
//double類型可選命名參數(shù)，當(dāng)按鈕啟用并具有焦點(diǎn)時(shí)，按鈕的elevation
this.focusElevation,
//double類型可選命名參數(shù)，當(dāng)按鈕啟用且指針懸停在按鈕上方時(shí)，按鈕的按鈕的elevation
this.hoverElevation,
//double類型可選命名參數(shù)，按鈕為啟用狀態(tài)并被按下時(shí)其相對(duì)于父級(jí)的高程
this.highlightElevation,
//double類型可選命名參數(shù)，當(dāng)按鈕為不可用狀態(tài)時(shí)其相對(duì)于父級(jí)的高程
this.disabledElevation,
//EdgeInsetsGeometry類型可選命名參數(shù)，設(shè)置按鈕的內(nèi)邊距
this.padding,
//ShapeBorder類型可選命名參數(shù)，設(shè)置按鈕形狀
this.shape,
//Clip類型可選命名參數(shù)，用于設(shè)置內(nèi)容將被如何裁剪
this.clipBehavior = Clip.none,
//FocusNode類型可選命名參數(shù)，按鈕的焦點(diǎn)節(jié)點(diǎn)
this.focusNode,
//bool類型可選命名命名參數(shù)，用于設(shè)置是否按鈕為當(dāng)前焦點(diǎn)
this.autofocus = false,
//MaterialTapTargetSize類型可選命名參數(shù)，設(shè)置按鈕的最小點(diǎn)擊尺寸
this.materialTapTargetSize,
//Duration類型可選命名參數(shù)，用于定義按鈕形狀或高亮變化的動(dòng)畫的持續(xù)時(shí)間
this.animationDuration
//double類型可選命名參數(shù)，按鈕的最小寬度
this.minWidth,
//double類型可選命名參數(shù)，按鈕的高度
this.height,
//bool類型可選命名參數(shù)，當(dāng)檢測(cè)到手勢(shì)時(shí)，是否提供聽覺視覺的反饋
this.enableFeedback = true,
//Widget類型可選命名參數(shù)，是為按鈕設(shè)置的顯示標(biāo)簽，可以為任意Widget，通常使用Text
this.child,
})
基本使用如下：
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Widget基礎(chǔ)"),
),
body: studyWidget(context),
),
);
}
}
//示例代碼值修改此函數(shù)
Widget studyWidget(BuildContext context) {
return MaterialButton(
child: Text("MaterialButton"),
onPressed: ()=> print("按鈕被點(diǎn)擊"),
color: Colors.red, //不設(shè)置填充色默認(rèn)為無(wú)色
);
}
2. RaisedButton Widget
RaisedButton 是一種外觀凸起的按鈕，其最小尺寸為 88.0 * 36.0 。構(gòu)造函數(shù)如下：
const RaisedButton({
Key key,
@required VoidCallback onPressed,
VoidCallback onLongPress,
ValueChanged<bool> onHighlightChanged,
ButtonTextTheme textTheme,
Color textColor,
Color disabledTextColor,
Color color,
Color disabledColor,
Color focusColor,
Color hoverColor,
Color highlightColor,
Color splashColor,
Brightness colorBrightness,
double elevation,
double focusElevation,
double hoverElevation,
double highlightElevation,
double disabledElevation,
EdgeInsetsGeometry padding,
ShapeBorder shape,
Clip clipBehavior = Clip.none,
FocusNode focusNode,
bool autofocus = false,
MaterialTapTargetSize materialTapTargetSize,
Duration animationDuration,
Widget child,
})
參數(shù)與 MaterialButton 相同部分不再介紹。使用方式如下：
//示例代碼值修改此函數(shù)
Widget studyWidget(BuildContext context) {
return RaisedButton(
child: Text("RaisedButton"),
onPressed: ()=> print("按鈕被點(diǎn)擊"),
);
}
也可寫做如下形式：
//示例代碼值修改此函數(shù)
Widget studyWidget(BuildContext context) {
return RaisedButton(
child: Text("RaisedButton"),
onPressed: buttonPressed,
);
}
void buttonPressed() {
print("按鈕被點(diǎn)擊");
}
其默認(rèn)效果如下：
202038212.jpg
其他屬性如下，使用縱向布局 Widget Column 來(lái)展示，如下：
Widget studyWidget(BuildContext context) {
return Column(
children: <Widget>[
RaisedButton(
child: Text("RaisedButton1"),
color: Colors.red, //按鈕填充色
textColor: Colors.amber, //文字顏色
onPressed: ()=> print("按鈕被點(diǎn)擊"),
),
RaisedButton(
child: Text("RaisedButton2"),
onPressed: ()=> print("按鈕被點(diǎn)擊"),
textTheme: ButtonTextTheme.primary, //按鈕主題
),
RaisedButton(
child: Text("RaisedButton3"),
disabledColor: Colors.blue, //按鈕禁用時(shí)的填充色
),
RaisedButton(
child: Text("RaisedButton4"),
disabledTextColor: Colors.tealAccent, //按鈕禁用時(shí)的文字顏色
),
RaisedButton(
child: Text("RaisedButton5"),
onPressed: ()=> print("按鈕被點(diǎn)擊"),
padding: EdgeInsets.all(20.0), //設(shè)備按鈕內(nèi)邊距
),
RaisedButton(
child: Text("RaisedButton6"),
onPressed: ()=> print("按鈕被點(diǎn)擊"),
shape: BeveledRectangleBorder( //設(shè)置按鈕形狀
borderRadius: BorderRadius.circular(8),
),
),
],
);
}
效果如下圖：
202038245.jpg
ButtonTextTheme 是一個(gè)枚舉類型，如下：
enum ButtonTextTheme {
//按鈕文本的顏色是黑還是白取決于主題 [ThemeData.brightness]
normal,
//按鈕文本的顏色與[ThemeData.accentColor]相同
accent,
//按鈕文本的顏色依賴于[ThemeData.accentColor]
primary,
}
在設(shè)置內(nèi)邊距 padding 使用的是 EdgeInsetsGeometry ，EdgeInsetsGeometry 是一個(gè)抽象類，其有兩個(gè)子類 EdgeInsets 和 EdgeInsetsDirectional ，這里使用 EdgeInsets ，其構(gòu)造函數(shù)如下：
//通過左、上、右、底來(lái)創(chuàng)建邊距
EdgeInsets.fromLTRB(this.left, this.top, this.right, this.bottom);
//四周創(chuàng)建同樣距離的邊距
EdgeInsets.all(double value) : left = value, top = value, right = value, bottom = value;
//可以單獨(dú)為某個(gè)方向創(chuàng)建邊距
EdgeInsets.only({
this.left = 0.0,
this.top = 0.0,
this.right = 0.0,
this.bottom = 0.0,
});
//縱向和橫向邊距
EdgeInsets.symmetric({
double vertical = 0.0,
double horizontal = 0.0,
}) : left = horizontal,
top = vertical,
right = horizontal,
bottom = vertical;
//創(chuàng)建于指定窗口邊距相同的邊距
EdgeInsets.fromWindowPadding(ui.WindowPadding padding, double devicePixelRatio)
: left = padding.left / devicePixelRatio,
top = padding.top / devicePixelRatio,
right = padding.right / devicePixelRatio,
bottom = padding.bottom / devicePixelRatio;
shape 設(shè)置形狀使用的是 ShapeBorder ，其也是一個(gè)抽象類，這里使用的是其子類，如下：
BeveledRectangleBorder 用于創(chuàng)建帶有平角或斜角的矩形邊框。構(gòu)造函數(shù)如下：
const BeveledRectangleBorder({
//BorderSide類型參數(shù)，為邊框樣式
this.side = BorderSide.none,
//BorderRadiusGeometry類型命名可選參數(shù)，為每個(gè)角的半徑
this.borderRadius = BorderRadius.zero,
})
除此之外還有很多其他的形狀類可以使用。
3. FlatButton Widget
FlatButton 是平面按鈕，沒有凸起與陰影等效果，如果不設(shè)置顏色等只能看見文字(設(shè)置文字的情況下)。使用方式與上述相同。
4. OutlineButton Widget
OutlineButton 為帶邊框的按鈕，其構(gòu)造函數(shù)如下：
const OutlineButton({
Key key,
@required VoidCallback onPressed,
//BorderSide類型可選命名參數(shù)，為在按鈕可用且未點(diǎn)擊狀態(tài)的邊框樣式
this.borderSide,
//Color類型可選命名參數(shù)，為按鈕不可用狀態(tài)時(shí)的邊框顏色
this.disabledBorderColor,
//Color類型可選命名參數(shù)，為按鈕可用狀態(tài)并按下時(shí)邊框的顏色
this.highlightedBorderColor,
//.... 省略相同屬性部分
Widget child,
})
使用方式與上述相同。
上面介紹的是 MaterialButton 與其子類按鈕，下面介紹其他的功能按鈕。
5. FloatingActionButton Widget
FloatingActionButton 為 Material Design 設(shè)計(jì)風(fēng)格的浮動(dòng)按鈕，可懸停在內(nèi)容之上，以提升應(yīng)用程序的主要操作。每個(gè)屏幕最多使用一個(gè)浮動(dòng)按鈕。其繼承自 StatelessWidget 為無(wú)狀態(tài)按鈕，有兩個(gè)構(gòu)造函數(shù)如下：
FloatingActionButton() 構(gòu)造函數(shù)，用于創(chuàng)建圓形浮動(dòng)操作按鈕。
const FloatingActionButton({
Key key,
//Widget類型可選命名參數(shù)，是為按鈕設(shè)置的顯示的Widget
this.child,
//String類型可選命名參數(shù)，按鈕按下時(shí)彈出的提示文本
this.tooltip,
//Color類型可選命名參數(shù)，默認(rèn)圖標(biāo)和文本顏色
this.foregroundColor,
//Color類型可選命名參數(shù)，按鈕的背景填充色
this.backgroundColor,
//Color類型可選命名參數(shù)，當(dāng)按鈕具有輸入焦點(diǎn)時(shí)用于填充按鈕的顏色
this.focusColor,
//Color類型可選命名參數(shù)，指針懸停在按鈕上時(shí)的填充顏色
this.hoverColor,
//Color類型可選命名參數(shù)，按鈕點(diǎn)擊時(shí)水波紋效果的顏色
this.splashColor,
//Object類型可選命名參數(shù)，應(yīng)用于按鈕的“英雄”小部件的標(biāo)簽
this.heroTag = const _DefaultHeroTag(),
//double類型可選命名參數(shù)，相對(duì)于其父按鈕放置此按鈕的z坐標(biāo)
this.elevation,
//double類型可選命名參數(shù)，當(dāng)按鈕具有輸入焦點(diǎn)時(shí)，相對(duì)于其父按鈕放置該按鈕的z坐標(biāo)
this.focusElevation,
//double類型可選命名參數(shù)，當(dāng)按鈕啟用且指針懸停在按鈕上方時(shí)，按鈕的按鈕的elevation
this.hoverElevation,
//double類型可選命名參數(shù)，按鈕為啟用狀態(tài)并被按下時(shí)其相對(duì)于父級(jí)的高程
this.highlightElevation,
//double類型可選命名參數(shù)，按鈕禁用時(shí)放置該按鈕的z坐標(biāo)
this.disabledElevation,
//Function類型必傳參數(shù)，為當(dāng)按鈕點(diǎn)擊時(shí)的回調(diào)方法，如果為null，按鈕將處于禁用狀態(tài)
@required this.onPressed,
//bool類型可選命名參數(shù)，控制此按鈕的大小
this.mini = false,
//ShapeBorder類型可選命名參數(shù)，設(shè)置按鈕形狀
this.shape,
//Clip類型可選命名參數(shù)，用于設(shè)置內(nèi)容將被如何裁剪
this.clipBehavior = Clip.none,
//FocusNode類型可選命名參數(shù)，此小部件的焦點(diǎn)節(jié)點(diǎn)
this.focusNode,
//bool類型可選命名參數(shù)，如果在當(dāng)前范圍內(nèi)沒有其他節(jié)點(diǎn)被聚焦時(shí)，此小部件將被選為初始焦點(diǎn)，則為True
this.autofocus = false,
//MaterialTapTargetSize類型可選命名參數(shù)，設(shè)置按鈕的最小點(diǎn)擊尺寸
this.materialTapTargetSize,
//bool類型可選命名參數(shù)，如果這是“擴(kuò)展”浮動(dòng)操作按鈕，則為True
this.isExtended = false,
})
使用如下：
Widget studyWidget(BuildContext context) {
return FloatingActionButton(
child: Icon(Icons.print),
foregroundColor: Colors.red,
backgroundColor: Colors.yellow,
onPressed: ()=> print("按鈕被點(diǎn)擊"),
);
}
效果如下圖：
202038437.jpg
FloatingActionButton.extended() 構(gòu)造函數(shù)，用于創(chuàng)建一個(gè)更寬的帶有可選圖標(biāo)和標(biāo)簽的邊框形狀的浮動(dòng)操作按鈕。
FloatingActionButton.extended({
Key key,
//Widget類型可選命名參數(shù)，為要實(shí)現(xiàn)的圖標(biāo)
Widget icon,
//Widget類型必傳參數(shù)，為按鈕要顯示的標(biāo)簽
@required Widget label,
//...省略相同功能的屬性
})
使用如下：
Widget studyWidget(BuildContext context) {
return FloatingActionButton.extended(
icon: Icon(Icons.memory),
label: Text("按鈕"),
foregroundColor: Colors.red,
backgroundColor: Colors.yellow,
onPressed: ()=> print("按鈕被點(diǎn)擊"),
);
}
效果如下：
202038440.jpg
6. IconButton Widget
Material Design 設(shè)計(jì)風(fēng)格圖標(biāo)按鈕，其繼承自 StatelessWidget 為無(wú)狀態(tài)按鈕，構(gòu)造方法如下：
const IconButton({
Key key,
//double類型可選命名參數(shù)，用來(lái)定義按鈕內(nèi)圖標(biāo)的大小
this.iconSize = 24.0,
//EdgeInsetsGeometry類型可選命名參數(shù)，用于定義圖標(biāo)按鈕的內(nèi)邊距
this.padding = const EdgeInsets.all(8.0),
//AlignmentGeometry類型可選命名參數(shù)，用于設(shè)置圖標(biāo)顯示的位置
this.alignment = Alignment.center,
//Widget類型必傳參數(shù)，按鈕內(nèi)部使用的圖標(biāo)
@required this.icon,
//Color類型可選命名參數(shù)，按鈕處于啟動(dòng)狀態(tài)時(shí)，內(nèi)部圖標(biāo)使用的顏色
this.color,
//Color類型可選命名參數(shù)，當(dāng)按鈕具有輸入焦點(diǎn)時(shí)，按鈕圖標(biāo)的顏色
this.focusColor,
//Color類型可選命名參數(shù)，指針懸停在按鈕上時(shí)的填充顏色
this.hoverColor,
//Color類型可選命名參數(shù)，用于設(shè)置按鈕的高亮顏色
this.highlightColor,
//Color類型可選命名參數(shù)，按鈕點(diǎn)擊時(shí)水波紋效果的顏色
this.splashColor,
//Color類型可選類型參數(shù)，按鈕禁用狀態(tài)下，內(nèi)部圖標(biāo)使用的顏色
this.disabledColor,
//Function類型必傳參數(shù)，為當(dāng)按鈕點(diǎn)擊時(shí)的回調(diào)方法，如果為null，按鈕將處于禁用狀態(tài)
@required this.onPressed,
//FocusNode類型可選命名參數(shù)，此小部件的焦點(diǎn)節(jié)點(diǎn)
this.focusNode,
//bool類型可選命名參數(shù)，如果當(dāng)其范圍內(nèi)沒有其他節(jié)點(diǎn)當(dāng)前被聚焦時(shí)，此小部件將被選為初始焦點(diǎn)，則為True
this.autofocus = false,
//String類型可選命名參數(shù)，按鈕按下時(shí)彈出的提示文本
this.tooltip,
//bool類型可選命名參數(shù)，檢測(cè)到的手勢(shì)是否提供聽覺視覺的反饋
this.enableFeedback = true,
})
使用方式如下：
Widget studyWidget(BuildContext context) {
return IconButton(
icon: Icon(Icons.add),
color: Colors.yellow,
onPressed: (){},
);
}
7. DropdownButton Widget
DropdownButton 用于定義一個(gè)下拉菜單按鈕，每一個(gè)菜單項(xiàng)使用 DropdownMenuItem 定義。一個(gè)菜單中的菜單項(xiàng)需要為同一類型。DropdownButton 繼承自 StatefulWidget 為一個(gè)有狀態(tài)的 Widget ，其構(gòu)造函數(shù)如下：
DropdownButton({
Key key,
// List<DropdownMenuItem<T>>類型必傳參數(shù)，設(shè)置的菜單項(xiàng)列表
@required this.items,
//DropdownButtonBuilder類型可選命名參數(shù)，用于定制與項(xiàng)目中的下拉菜單
//項(xiàng)(DropdownMenuItem)相對(duì)應(yīng)的按鈕
this.selectedItemBuilder,
//泛型T類型可選命名參數(shù)，為當(dāng)前選擇的是哪個(gè)下拉菜單項(xiàng)
this.value,
//Widget類型可選命名參數(shù)，下拉按鈕顯示的占位符Widget
this.hint,
//Widget類型可選命名參數(shù)，當(dāng)下拉菜單被禁用時(shí)顯示的內(nèi)容
this.disabledHint,
//Function類型必傳參數(shù)，選擇一個(gè)菜單項(xiàng)時(shí)調(diào)用
@required this.onChanged,
//int類型可選命名參數(shù)，打開時(shí)放置菜單的z坐標(biāo)
this.elevation = 8,
//TextStyle類型可選命名參數(shù)，用于設(shè)置下拉菜單中文本的文本的樣式，以及點(diǎn)擊按鈕時(shí)出現(xiàn)的下拉菜單
this.style,
//Widget類型可選命名參數(shù)，用于繪制下拉按鈕下劃線的Widget
this.underline,
//Widget類型可選命名參數(shù)，下拉按鈕圖標(biāo)的Widget
this.icon,
//Color類型可選命名參數(shù)，按鈕禁用狀態(tài)的內(nèi)部圖標(biāo)的顏色
this.iconDisabledColor,
//Color類型可選命名參數(shù)，按鈕啟用狀態(tài)的內(nèi)部圖標(biāo)的顏色
this.iconEnabledColor,
//double類型可選命名參數(shù)，下拉按鈕的向下箭頭圖標(biāo)按鈕的大小
this.iconSize = 24.0,
//bool類型可選命名參數(shù)，是否降低按鈕的高度
this.isDense = false,
//bool類型可選命名參數(shù)，是否將下拉列表的內(nèi)部?jī)?nèi)容設(shè)置為水平填充其父項(xiàng)
this.isExpanded = false,
//double類型可選命名參數(shù)，如果為null，則菜單項(xiàng)高度將根據(jù)每個(gè)菜單項(xiàng)的固有高度而變化
this.itemHeight = kMinInteractiveDimension,
//Color類型可選命名參數(shù)，當(dāng)按鈕具有輸入焦點(diǎn)時(shí)，按鈕材質(zhì)的顏色
this.focusColor,
//FocusNode類型可選命名參數(shù)，此小部件的焦點(diǎn)節(jié)點(diǎn)
this.focusNode,
//bool類型可選命名參數(shù)，如果當(dāng)其范圍內(nèi)沒有其他節(jié)點(diǎn)當(dāng)前被聚焦時(shí)，此小部件將被選為初始焦點(diǎn)，則為True
this.autofocus = false,
})
DropdownMenuItem 菜單項(xiàng)的構(gòu)造函數(shù)如下：
const DropdownMenuItem({
Key key,
//泛型T類型可選參數(shù)，為當(dāng)用戶選擇此菜單項(xiàng)時(shí)返回的值
this.value,
//Widget類型必傳參數(shù)，菜單項(xiàng)要顯示的Widget
@required Widget child,
})
基本使用方式如下:
Widget studyWidget(BuildContext context) {
return DropdownButton(
items: <DropdownMenuItem<int>>[
DropdownMenuItem(
child: Text("Item 1"),
value: 1,
),
DropdownMenuItem(
child: Text("Item 2"),
value: 2,
),
DropdownMenuItem(
child: Text("Item 3"),
value: 3,
),
],
onChanged: (value)=> print(value),
);
}
2020381102.jpg
但是現(xiàn)在存在一個(gè)問題，雖然可以選擇菜單項(xiàng)并且輸出對(duì)應(yīng)的 value ，但是操作后界面是無(wú)變化的。上面說(shuō)過 DropdownButton 繼承自 StatefulWidget ，是一個(gè)有狀態(tài)的 Widget，對(duì)于有狀態(tài)的 Widget ，前面文章曾經(jīng)介紹過，都會(huì)與狀態(tài)類一起使用，在狀態(tài)類中對(duì)數(shù)據(jù)界面做操作才能實(shí)現(xiàn)界面的更新操作，更改代碼如下：
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Widget基礎(chǔ)"),
),
body: MyDropdownMenu(),
),
);
}
}
class MyDropdownMenu extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _MyDropdownMenuState();
}
}
class _MyDropdownMenuState extends State<MyDropdownMenu> {
int currentSelectIndex = 1;
@override
Widget build(BuildContext context) {
return DropdownButton(
items: <DropdownMenuItem<int>>[
DropdownMenuItem(
child: Text("Item 1"),
value: 1,
),
DropdownMenuItem(
child: Text("Item 2"),
value: 2,
),
DropdownMenuItem(
child: Text("Item 3"),
value: 3,
),
],
value: currentSelectIndex,
onChanged: (value) {
print(value);
setState(() {
currentSelectIndex = value;
});
},
);
}
}
將更新數(shù)據(jù)項(xiàng)放在 setState() 方法內(nèi)進(jìn)行操作即可。
其他屬性設(shè)置如下：
class _MyDropdownMenuState extends State<MyDropdownMenu> {
int currentSelectIndex = 1;
@override
Widget build(BuildContext context) {
return DropdownButton(
items: <DropdownMenuItem<int>>[
DropdownMenuItem(
child: Text("Item 1"),
value: 1,
),
DropdownMenuItem(
child: Text("Item 2"),
value: 2,
),
DropdownMenuItem(
child: Text("Item 3"),
value: 3,
),
],
value: currentSelectIndex,
selectedItemBuilder: (BuildContext context){
return <Widget>[
Icon(Icons.add),
Icon(Icons.print),
Icon(Icons.ac_unit),
];
},
hint: Text("hint"),
disabledHint: Text("按鈕被禁用"),
style: TextStyle(
fontSize: 24.0,
color: Colors.red,
),
underline: Container(
height: 1,
color: Colors.yellow,
),
icon: Icon(Icons.arrow_downward),
onChanged: (value) {
print(value);
setState(() {
currentSelectIndex = value;
});
},
);
}
}
效果如下：
202039228.jpg
selectedItemBuilder 使用 DropdownButtonBuilder 構(gòu)造器，其是一個(gè)返回 List<Widget> 的 Function ，圓形為：List<Widget> Function(BuildContext context) ，作用是定義與下拉列表中選項(xiàng)相對(duì)應(yīng)的每一個(gè) Widget ，這個(gè) Widget 用來(lái)顯示在菜單未點(diǎn)開的情況下顯示。
hint 用來(lái)定義按鈕在 value 屬性為 null 或此按鈕被禁用且 disabledHint 屬性也為 null 時(shí)顯示。
disabledHint 如果不為 null ，在按鈕被禁用時(shí)顯示。
icon 屬性用來(lái)定義下拉按鈕靠右側(cè)顯示的圖標(biāo)。
8. PopupMenuButton Widget
PopupMenuButton 是彈出菜單
const PopupMenuButton({
Key key,
//PopupMenuItemBuilder<T>類型必傳參數(shù)，當(dāng)按下按鈕創(chuàng)建要在菜單中顯示的項(xiàng)目時(shí)調(diào)用
@required this.itemBuilder,
//泛型T類型可選命名參數(shù)，菜單打開時(shí)應(yīng)突出顯示的菜單項(xiàng)的值(如果有)，也就是打開時(shí)選擇哪一項(xiàng)
this.initialValue,
//PopupMenuItemSelected<T>類型可選命名參數(shù)，當(dāng)用戶從該按鈕創(chuàng)建的彈出菜單中選擇一個(gè)值時(shí)調(diào)用
this.onSelected,
//PopupMenuCanceled類型可選命名參數(shù)，當(dāng)用戶在不選擇項(xiàng)目的情況下關(guān)閉彈出菜單時(shí)調(diào)用
this.onCanceled,
//String類型可選命名參數(shù)，按鈕按下時(shí)彈出的提示文本
this.tooltip,
//double類型可選命名參數(shù)，打開時(shí)放置菜單的z坐標(biāo)。這控制了菜單下陰影的大小
this.elevation,
//EdgeInsetsGeometry類型可選命名參數(shù)，默認(rèn)情況下匹配圖標(biāo)按鈕的8 dps填充。在某些情況下，特別是當(dāng)該按鈕作為列表項(xiàng)的尾部元素出現(xiàn)時(shí)，能夠?qū)⑻畛湓O(shè)置為零是很有用的
this.padding = const EdgeInsets.all(8.0),
//Widget類型可選命名參數(shù)，如果提供，child是用于該按鈕的小部件，該按鈕將利用InkWell進(jìn)行點(diǎn)擊
this.child,
//Widget類型可選命名參數(shù)，如果圖標(biāo)用于此按鈕，該按鈕的行為類似IconButton
this.icon,
//Offset類型可選命名參數(shù)，應(yīng)用于彈出菜單按鈕的偏移量
this.offset = Offset.zero,
//bool類型可選命名參數(shù)，該彈出菜單按鈕是否是交互式的
this.enabled = true,
//ShapeBorder類型可選命名參數(shù)，用于菜單的形狀
this.shape,
//Color類型可選命名參數(shù)，菜單背景顏色
this.color,
//bool類型可選命名參數(shù)，如果為真(缺省值)，那么菜單將被包裝成繼承主題的副本，如主題和彈出主題，它們被定義在顯示菜單的構(gòu)建上下文之上
this.captureInheritedThemes = true,
})
itemBuilder 的類型是 PopupMenuItemBuilder<T> ，其是一個(gè) Function ，原型為：List<PopupMenuEntry<T>> Function(BuildContext context) 。PopupMenuButton 的使用如下：
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Widget基礎(chǔ)"),
),
body: MyPopupMenuButton(),
),
);
}
}
class MyPopupMenuButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return PopupMenuButton(
itemBuilder: (context) {
return <PopupMenuEntry<String>> [
const PopupMenuItem(
child: Text("選項(xiàng)1"),
value: "1",
),
const PopupMenuItem(
child: Text("選項(xiàng)2"),
value: "2",
),
const PopupMenuItem(
child: Text("選項(xiàng)3"),
value: "3",
),
];
},
onSelected: (value){
print(value);
},
onCanceled: (){
print("未選擇任何選項(xiàng)，菜單關(guān)閉");
},
icon: Icon(Icons.add),
initialValue: "2",
offset: Offset(50, 110),
color: Colors.yellow,
);;
}
}
其中，child 和 icon 只能選擇一個(gè)使用，都是圖標(biāo)在界面上未展開時(shí)顯示的 Widget 。這里使用的是無(wú)狀態(tài)的形式，如果需要對(duì)界面做數(shù)據(jù)更新處理，則需要使用 StatefulWidget 。
效果如下：
2020310448.jpg
