如何让DropdownButton的borderRadius与其下拉菜单的borderRadius不同？

默认情况下，DropdownButton的borderRadius参数仅控制下拉菜单的圆角，按钮自身的圆角需要通过外层容器自定义样式来实现，从而让两者的圆角不同。具体实现如下：

用Container包裹DropdownButton，通过容器的decoration属性单独设置按钮的圆角、背景等样式，同时保留DropdownButton的borderRadius参数来定义下拉菜单的圆角，以此实现两者圆角差异化。

修改后的代码示例：

Container(
  decoration: BoxDecoration(
    color: Colors.amber, // 按钮背景色，可按需自定义
    borderRadius: BorderRadius.circular(20), // 按钮的圆角数值
    border: Border.all(color: Colors.grey.shade300), // 可选：给按钮加边框
  ),
  child: DropdownButton(
    isExpanded: true,
    menuMaxHeight: 100,
    dropdownColor: Colors.amber,
    borderRadius: BorderRadius.circular(15), // 下拉菜单的圆角数值
    items: ['widget.list', 'l', 'l']
        .map((value) => DropdownMenuItem(
              value: value,
              child: Text(
                value,
                style: const TextStyle(
                  color: Colors.white,
                ),
              ),
            ))
        .toList(),
    icon: const Icon(
      Icons.keyboard_arrow_down,
      color: Colors.white,
    ),
    iconSize: 32,
    elevation: 4,
    underline: Container(height: 0),
    style: const TextStyle(
      color: Colors.black,
      fontSize: 16,
      fontWeight: FontWeight.w400,
    ),
    onChanged: (newValue) {
      setState(() {
        //selectedRemind = newValue!;
      });
    },
  ),
)

关键说明： #

• 外层Container的borderRadius负责控制按钮的圆角，可自由调整数值
• DropdownButton自身的borderRadius仅作用于下拉菜单，设置与按钮不同的数值即可实现差异化效果

内容的提问来源于stack exchange，提问作者abulorianz