Ionic & Angular - iOS 上的 Ion 日期时间设计

Posted 2023-05-06

【中文标题】Ionic & Angular - iOS 上的 Ion 日期时间设计

【英文标题】：Ionic & Angular - Ion Datetime Design on iOS

【发布时间】：2021-10-07 22:15:06

【问题描述】：

上下文

我遇到了 Ionic + Angular + Capacitor + ios 的问题。它与ion-datetime iOS 组件设计有关，根据我的研究，有一种可能的解决方法可以像 android 设备一样匹配它。

问题

当实现 ion-datetime 并将其应用于 iOS 设备时，问题就开始了。如果我们希望这个组件 iOS 设计与 Android 设计相匹配，文档会告诉我们传递一个带有值 md 的 mode 属性。这是一个 html 示例：

<ion-datetime mode="md">/ion-datetime>

还有一个 HTML 和 TS 的例子：

pickerOptions: any = 
    mode: "md",
;

<ion-datetime [pickerOptions]="pickerOptions"></ion-datetime>

但是，这种记录在案的方法并没有达到理想的结果。因此，iOS 组件仍然有一个弯曲的***，而不是一个平板。让我们来看看视觉解释。

视觉解释

如前所述，iOS 和 Android 设备现在应该具有完全相同的设计，因为我们已将 mode 属性设置为 md。正如我们在示例图像中看到的那样，显然情况并非如此。 iOS 组件设计仍然像某种弯曲的***。继续与安卓设备大不相同。

【问题讨论】：

嗨格林内克斯。我们在这里对 Q/A 分离非常严格。如果你以后发现自己有答案，请先写一个问题，就像你没有答案一样，然后添加一个自我答案。我已经使用 Community Wiki 选项（见下文）对此进行了拆分，所以一切都在这里完成，除非您想自己重新发布答案（那很好）。

【参考方案1】：

（代表问题作者发布，以便将其移至答案空间）。

解决此问题的解决方案非常简单。然而，它会影响所有 Ionic 组件设计，因为我们要将完整的Ionic Module 设置为仅md（材料设计）。所以请注意，与前端相关的所有内容都将被覆盖以拥有 Android 设计。为了实现这个解决方案/解决方法，我们只需要操作文件“app.module.ts”。

#1 应用模块 TS（离子项目）

...

@NgModule(
    imports: [
        IonicModule.forRoot(
            mode: 'md',
        ),
    ]
)

export class AppModule 

就是这样！ iOS ion-datetime 组件设计现在将变得与 Android 组件设计完全相同。请不要忘记，这将导致所有离子组件都被材料设计覆盖。

参考文献

https://ionicframework.com/docs/api/datetime https://ionicframework.com/docs/api/picker#pickeroptions https://github.com/ionic-team/ionic-framework/issues/16717