Shadcn UI 中 ShadDialog.alert 在 Android 平台忽略圆角设置的解决方案

在 Flutter 项目中使用 Shadcn UI 组件库时，开发者可能会遇到一个特定现象：ShadDialog.alert 组件的圆角设置（BorderRadius.circular）在 Android 平台不生效，而在 Web 和 Linux 平台则表现正常。

问题现象

当开发者使用 ShadDialog.alert 组件并设置 radius 参数为 BorderRadius.circular(12.0) 时，在 Android 设备上对话框的边角会保持直角（90度），而在 Web 和 Linux 平台上则会正确显示为圆角。这种平台差异性的行为可能会影响应用在不同平台上的一致性体验。

原因分析

经过 Shadcn UI 项目维护者的确认，这是组件的预期行为而非 bug。组件内部实现时，针对小尺寸设备（如手机）做了特殊处理，默认会移除圆角设置。这种设计决策可能是出于以下考虑：

1. 在小屏幕上，圆角可能会占用更多空间
2. 直角设计在某些移动设备上可能更符合平台规范
3. 确保对话框内容在有限空间内最大化显示

解决方案

要强制在所有平台上保持自定义圆角，开发者可以使用 removeBorderRadiusWhenTiny 参数，将其设置为 false：

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

最佳实践建议

1. 平台一致性：如果追求跨平台完全一致的视觉效果，建议始终设置 removeBorderRadiusWhenTiny: false

2. 响应式设计：可以考虑根据平台或屏幕尺寸动态设置该参数：

removeBorderRadiusWhenTiny: Platform.isAndroid ? false : true

3. 视觉测试：在实现后，务必在不同平台和设备尺寸上进行测试，确保视觉效果符合预期

4. 主题统一：如果项目中大量使用对话框，建议创建一个统一的对话框包装组件，集中管理这些样式设置

总结

Shadcn UI 的对话框组件针对不同平台做了差异化处理，开发者可以通过 removeBorderRadiusWhenTiny 参数灵活控制这一行为。理解组件设计背后的意图，并根据项目需求进行适当配置，是保证应用跨平台一致性的关键。