如何为Flutter的DropdownMenu设置圆角（椭圆形样式）

要实现DropdownMenu的椭圆形外观，你可以在menuStyle的shape属性中使用RoundedRectangleBorder，通过调整borderRadius参数生成足够大的圆角，从而呈现椭圆形效果。

修改后的完整代码 #

class DropdownWidget extends StatefulWidget {
  const DropdownWidget({super.key});

  @override
  State<DropdownWidget> createState() => _DropdownWidgetState();
}

class _DropdownWidgetState extends State<DropdownWidget> {
  final controller = TextEditingController();
  Routes? route;

  @override
  Widget build(BuildContext context) {
    return DropdownMenu<Routes>(
      menuStyle: MenuStyle(
        // 配置椭圆形圆角
        shape: MaterialStateProperty.all(
          RoundedRectangleBorder(
            // 数值可根据菜单高度调整，越大越接近椭圆，24为示例值
            borderRadius: BorderRadius.circular(24),
            // 可选：添加菜单边框，不需要可删除
            // side: const BorderSide(color: Colors.grey.shade300, width: 1),
          ),
        ),
      ),
      requestFocusOnTap: true,
      enableFilter: true,
      onSelected: (Routes? routeitem) {
        setState(() {
          route = routeitem;
        });
      },
      controller: controller,
      dropdownMenuEntries: Routes.values.map<DropdownMenuEntry<Routes>>((Routes route) {
        return DropdownMenuEntry<Routes>(
          value: route,
          label: route.label,
        );
      }).toList(),
    );
  }
}

关键细节说明 #

• shape属性要求传入MaterialStateProperty<ShapeBorder>，用MaterialStateProperty.all()可以固定样式，不受按钮状态影响。
• RoundedRectangleBorder是Flutter内置的圆角边框组件，当borderRadius的数值大于菜单高度的一半时，菜单就会呈现椭圆形外观。
• 如果需要给菜单添加边框，可在RoundedRectangleBorder中配置side属性，自定义边框颜色和宽度。

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