Flutter Shadcn UI 中 Dialog 圆角问题的解决方案

在 Flutter 开发中使用 Shadcn UI 组件库时，开发者可能会遇到一个关于对话框圆角样式的问题：ShadDialog.alert 的 radius 参数在 Android 平台上似乎不起作用，而在 Web 和 Linux 平台上却能正常工作。

问题现象

当开发者尝试为 ShadDialog.alert 设置圆角时，例如使用 BorderRadius.circular(12.0)，在 Android 设备上对话框仍然显示为直角，而在 Web 和 Linux 平台上则能正确显示圆角效果。

原因分析

这实际上是 Shadcn UI 组件库的预期行为，而非 bug。库的设计者在实现时考虑到了移动设备（特别是 Android）上对话框显示的特殊性，默认在小尺寸设备上移除了圆角效果，以确保更好的视觉一致性。

解决方案

要强制在所有平台上都显示圆角效果，开发者可以使用 removeBorderRadiusWhenTiny 参数，将其设置为 false：

showShadDialog(
  context: context,
  builder: (context) => ShadDialog.alert(
    radius: BorderRadius.circular(12.0),
    removeBorderRadiusWhenTiny: false,  // 关键设置
    // 其他参数...
  ),
);

设计考量

这种默认行为的设计可能有以下几个原因：

1. 平台一致性：Android 原生对话框通常采用直角设计，保持与系统风格一致
2. 小屏幕优化：在小尺寸设备上，圆角可能会占用更多空间或影响内容显示
3. 视觉层次：直角对话框在某些情况下能提供更强的视觉分割效果

最佳实践

• 在跨平台应用中，建议测试对话框在所有目标平台上的显示效果
• 对于需要严格统一设计风格的项目，可以全局配置对话框样式
• 考虑用户设备尺寸差异，在小屏幕设备上适当调整圆角大小

通过理解这一设计决策并正确使用 removeBorderRadiusWhenTiny 参数，开发者可以灵活控制对话框在不同平台上的显示效果，实现既美观又实用的用户界面。