Flutter基礎-042-DropDownButton下拉選單

天色將變發表於2021-03-02

image.png

image.png

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,),// 下劃線

            ),
          ),
        ],
      ),
    );
  }

}
複製程式碼

相關文章