Flutter DropdownButton 添加边框,及文本与Icon间距设置

FAEC8D54-76A2-4131-B192-36D6735F75DD.png
Container(

                  width: 400,//根据需求自定义

                  margin: EdgeInsets.only(bottom: 5),//根据需求自定义

                  padding: EdgeInsets.only(top: 5, bottom: 3, left: 15),//根据需求自定义

                  //设置边框,参数自定义

                  decoration: BoxDecoration(

                    border: Border.all(color: Colors.black38, width: 1),

                    //边框圆角设置

                    borderRadius: BorderRadius.vertical(

                        top: Radius.elliptical(4, 4),

                        bottom: Radius.elliptical(4, 4)),

                  ),

                  //

                  child: DropdownButton(

                    isExpanded: true,//文本 与 图标 间距样式 在此处设置!!!! true为最大间距,false为默认

                    hint: new Text("请添加数据信息"), // 当没有初始值时显示

                    value: "1", // 设置初始值,方便设置默认选项。并且DropdownMenuItem中的value要有该值,不然会报错

                    //选中后的回调,根据自己的情况用Statefull或Provider管理状态

                    onChanged: (selectValue) {

                      setState(() {

                        //此处的value是自定义的

                        value = selectValue;

                      });

                    },

                    elevation: 8, //设置阴影,只识别1、2、3、4、6、8、9、12、16、24。其他值无效

                    icon: Icon(Icons.arrow_drop_down),//图标,可自定义

                    iconSize: 30,//设置图标大小

                    underline: Container(color: Colors.white),

                    items: <DropdownMenuItem<String>>[

                      DropdownMenuItem(

                        child: Text(

                          "DropdownMenuItem-1",

                          style: TextStyle(

                            //此处的value是自定义的

                            color: value == "1" ? Colors.blue : Colors.grey,

                          ),

                        ),

                        value: "1",

                      ),

                      DropdownMenuItem(

                        child: Text(

                          "DropdownMenuItem-2",

                          style: TextStyle(

                            //此处的value是自定义的

                            color: value == "2" ? Colors.blue : Colors.grey),

                        ),

                        value: "2",

                      ),

                    ],

                  ),

                ),

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
禁止转载,如需转载请通过简信或评论联系作者。