flutter中下拉选择DropdownButton调整样式

前言

flutter自带的DropdownButton样式不是很好看，想实现一个类似html中的select标签的样式。

方案

// 通过外部包裹一个container，在container里装饰一个边框
Container(
    padding: EdgeInsets.only(left: 5),
    decoration: BoxDecoration(
        // 圆角
        borderRadius: BorderRadius.circular(3.0),
        // 边框
        border: Border.all(width: 0.6, color: Color(0xff999999)),
    ),
    // DropdownButtonHideUnderline 是用于描述一个没有边框的下拉菜单
    child: DropdownButtonHideUnderline(
        child: DropdownButton<String>(
            value: platform,
            // 阴影
            elevation: 1,
            // 扩充容器水平宽度
            isExpanded: true,
            // 文字样式
            style: TextStyle(color: Colors.black, overflow: TextOverflow.clip, fontSize: 13),
            // 下拉框右侧的三角图标
            icon: Expanded(
                // 让图标居右
                child: Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                        Icon(Icons.arrow_drop_down),
                    ],
                ),
            ),
            // 文字居左
            alignment: AlignmentDirectional.centerStart,
            // 下拉项
            items: [
                DropdownMenuItem<String>(
                    value: "选中要保存的标识",
                    child: Text("显示的文字"),
                ),
            ],
            onChanged: (newValue) {
                // 设置状态
                setState(() {
                    platform = newValue!;
                });
            },
        ),
    ),
)