class _MyHomePageState extends State<MyHomePage> {
String value = "3";
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(),
body: new Column(
children: <Widget>[
new Center(
child: new DropdownButton(
items: <DropdownMenuItem<String>>[
DropdownMenuItem(child: Text("1111",style: TextStyle(color: value=="1"?Colors.red:Colors.grey),),value: "1",),
DropdownMenuItem(child: Text("2222",style: TextStyle(color: value=="2"?Colors.red:Colors.grey),),value: "2",),
DropdownMenuItem(child: Text("3333",style: TextStyle(color: value=="3"?Colors.red:Colors.grey),),value: "3",),
DropdownMenuItem(child: Text("4444",style: TextStyle(color: value=="4"?Colors.red:Colors.grey),),value: "4",),
],
hint:new Text("提示資訊"),// 當沒有初始值時顯示
onChanged: (selectValue){//選中後的回撥
setState(() {
value = selectValue;
});
},
value: value,// 設定初始值,要與列表中的value是相同的
elevation: 10,//設定陰影
style: new TextStyle(//設定文字框裡面文字的樣式
color: Colors.blue,
fontSize: 15
),
iconSize: 30,//設定三角標icon的大小
underline: Container(height: 1,color: Colors.blue,),// 下劃線
),
),
],
),
);
}
}
複製程式碼
Flutter基礎-042-DropDownButton下拉選單
相關文章
- Flutter 自定義功能強大的下拉篩選選單 packageFlutterPackage
- 下拉選單
- 『心善淵』Selenium3.0基礎 — 13、Selenium操作下拉選單
- vue下拉選單Vue
- html - 下拉選單HTML
- Spinner下拉選單
- Bootstrap下拉選單disabledboot
- Flutter 74: 圖解基本 DropdownButton 下拉選Flutter圖解
- Vue.js自定義下拉選單,如何實現在下拉選單區域外點選即可關閉下拉選單的功能Vue.js
- kendoUI 多選下拉選單 kendoMultiSelectUI
- CSS 二級下拉選單CSS
- HTML select下拉選單HTML
- HTML select 下拉選單HTML
- CSS二級下拉選單CSS
- jQuery 二級下拉選單jQuery
- DIV下拉式選單(轉)
- 選中select下拉選單項提交表單
- Flutter 基礎控制元件篇-->單選框(Switch)、核取方塊(Checkbox)Flutter控制元件
- jQuery 美化select下拉選單jQuery
- 圓角select下拉選單
- Bootstrap3系列:下拉選單boot
- select下拉選單 change事件事件
- bootstrap36-Bootstrap下拉選單boot
- 滑鼠滑過,展示下拉選單
- AngularJS教程十—— 下拉選單AngularJS
- Flutter Test 基礎Flutter
- flutter基礎faqFlutter
- HTML+CSS+JQuery實現下拉選單滑鼠懸浮顯示下拉選單,取消隱藏HTMLCSSjQuery
- JavaGUI——swing元件基礎(八)選單欄/選單/子選單元件JMenuBar/JMenu/JMenuItemJavaGUI元件
- css滑鼠懸浮下拉選單效果CSS
- JavaScript二級下拉選單詳解JavaScript
- 下拉選單框和滾動條
- CSS導航欄及下拉選單CSS
- HTML+CSS實現下拉選單HTMLCSS
- JavaScript帶下拉選單的文字框JavaScript
- jQuery與CSS二級下拉選單jQueryCSS
- 可以輸入select下拉選單
- 滑鼠經過顯示下拉選單