flutter DropdownButton的基本使用和会出现的问题

最新推荐文章于 2025-03-28 19:00:00 发布

原创最新推荐文章于 2025-03-28 19:00:00 发布 · 1.2w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #dropdwonbutton

Flutter 专栏收录该内容

8 篇文章

订阅专栏

本文分享了在Flutter中如何创建一个带有圆角边框的DropdownButton组件，并详细介绍了其样式设置、菜单项配置及回调函数的使用。通过示例代码，解决了在实现过程中遇到的文本颜色控制难题。

dropdwonbutton 是flutter 自带的菜单组按钮，我在开发中需要做一个圆角边框按钮，点击显示菜单栏，期间出现了一些小问题，我们先上代码，把问题直接显示在代码上面

Container(
                  margin: EdgeInsets.fromLTRB(16, 4, 8, 4),
                    child: new Container(
                      padding: EdgeInsets.fromLTRB(4, 4, 0, 4),
                      //设置圆角边框     
                      decoration: new BoxDecoration(
                        border: new Border.all(color: Color(0xFF00C8A5),width: 0.5),
                        borderRadius: new BorderRadius.vertical(top: Radius.elliptical(4, 4),bottom:Radius.elliptical(4, 4) ),
                        color: Color(0xFF00C8A5)
                      ),
                      child: new DropdownButton(
                        items: dropdownItems(),//设置菜单组，
                        onChanged: (value) {//按钮菜单选择回调
                          setState(() {
                            _showContent = value;

                          });
                        },
                        //提示控件，你可以弄成文字或者是图片（如果有value的化value的文字会显示在最上面，这就是问题的所在，这个文字的颜色是items控件里面的颜色，这样会导致按钮颜色不能控制，唯一的办法目前就是去掉value）
                        hint: new Text(_showContent,style: TextStyle(color: Colors.white),),
                        isDense: true,
                        //去掉它
                        value:_showContent,
                        underline: new Container(),
                        style: TextStyle(color: Colors.white),
                        iconEnabledColor:Colors.white ,
                        iconDisabledColor: Colors.white ,
                      ),
                    ),
                )
//设置itmes组。。。。
dropdownItems(){
    List<DropdownMenuItem<String>> list = new List();
    dropdownData.forEach((key){
      var value = payTypeData[key];
      list.add(
        new DropdownMenuItem(
            child: new Container(
                color: Colors.white,
                child: new Text(key,style: TextStyle(color: Colors.black),),
            ),value: key
        ),
      );
    });

    return list;
  }