# WebF 本机 UI 库 WebF 不是使用 HTML/CSS 制作所有 UI，而是提供**预构建的本机 UI 库**，这些库可以呈现为具有完整本机性能的本机 Flutter 小部件。这些组件在每个平台上看起来和感觉都是原生的，同时由 JavaScript 代码控制。 ## 什么是本机 UI 库？本机 UI 库是 UI 组件的集合，这些组件： * **渲染为原生 Flutter 小部件**（不是 DOM 元素） * **每个平台（iOS、Android 等）上的外观和感觉都是原生的** * **为复杂的 UI 提供比 HTML/CSS 更好的性能** * **使用特定于平台的设计**（Cupertino for iOS，Material for Android） * **使用 React、Vue 和普通 JavaScript** ## 可用库 ### 库比蒂诺 UI ✅ **描述**：遵循 Apple 人机界面指南的 iOS 风格组件 **平台**：iOS、macOS（针对 iOS 设计进行了优化） **组件数量**：30 多个组件 **可用组件**： * **导航和布局**：选项卡、支架、TabBar、TabView * **对话框和表格**：警报对话框、操作表、模式弹出窗口、上下文菜单 * **列表**：列表部分、列表图块 * **表单**：表单部分、表单行、文本字段、搜索字段 * **选择器**：日期选择器、时间选择器 * **控件**：按钮、开关、滑块、分段控件、复选框、收音机 * **图标**：1000+ SF 符号 * **颜色**：库比蒂诺颜色系统 **NPM 包**： * 反应：`@openwebf/react-cupertino-ui` * Vue：`@openwebf/vue-cupertino-ui` **颤振包**：`webf_cupertino_ui` **文档**： ** ** ## 何时使用原生 UI 与 HTML/CSS ### 在以下情况下使用库比蒂诺 UI： * ✅ 构建 iOS 风格的应用程序 * ✅ 需要原生的 iOS 表单、按钮和控件 * ✅ 想要复杂 UI 的 60fps 原生性能 * ✅ 构建 iOS 列表、对话框或导航模式 * ✅ 需要Apple的人机界面指南设计语言 ### 在以下情况下使用 HTML/CSS： * ✅ 构建不遵循平台模式的定制设计 * ✅ 使用现有的 Web 组件库（例如 Tailwind CSS） * ✅ 需要最大程度的造型灵活性 * ✅ 移植现有的网络应用程序 * ✅ 构建跨平台设计（非特定于平台） ## 设置说明 ### 步骤1：配置Flutter项目（可选）如果您有权访问托管 WebF 应用程序的 Flutter 项目： **对于库比蒂诺用户界面：** 1. 打开 Flutter 项目的 pubspec.yaml 2.添加依赖：依赖项： webf_cupertino_ui：^1.0.0 3. 运行：`flutter pub get` 4. 在主 Dart 文件中初始化：导入'包：webf/webf.dart'；导入'包：webf_cupertino_ui/webf_cupertino_ui.dart'; 无效主（）{ WebFControllerManager.instance.initialize(WebFControllerManagerConfig( 最大活动实例数：2，最大附加实例数：1，））； // 安装库比蒂诺 UI 组件安装WebFCupertinoUI(); runApp(MyApp()); } ### 步骤 2：安装 NPM 包（JavaScript/TypeScript） **对于反应：** npm install @openwebf/react-cupertino-ui **对于 Vue：** npm install @openwebf/vue-cupertino-ui ### 步骤 3：在代码中使用组件 **反应示例：** 从 '@openwebf/react-cupertino-ui' 导入 { FlutterCupertinoButton, FlutterCupertinoTextField }; 导出函数 MyComponent() { 返回（

console.log('值:', value)} /> console.log('点击')} > 提交

）； } **Vue 示例：** <模板>

提交

<脚本设置> 从 '@openwebf/vue-cupertino-ui' 导入 { FlutterCupertinoTextField, FlutterCupertinoButton }; const handleChange = (值) => { console.log('值：', 值); }; const handleClick = () => { console.log('点击'); }; ## 组件参考有关可用组件及其属性的完整列表，请参阅[本机 UI 组件参考]()。 ## 常见模式 ### 1\.构建 iOS 风格的表单导入{ FlutterCupertinoFormSection， FlutterCupertinoFormRow， FlutterCupertinoTextField, FlutterCupertinoButton 来自 '@openwebf/react-cupertino-ui'; 导出函数 ProfileForm() { 返回（保存更改）； } ### 2\.构建设置屏幕导入{ FlutterCupertinoListSection， FlutterCupertinoListTile， FlutterCupertinoSwitch 来自 '@openwebf/react-cupertino-ui'; 导出函数SettingsScreen() { 返回（ } /> } /> ）； } ### 3\.显示本机对话框从'@openwebf/react-cupertino-ui'导入{FlutterCupertinoAlertDialog}；导出函数ConfirmationDialog({ onConfirm, onCancel }) { 返回（）； } ## 最佳实践 ### 1\.将本机 UI 与 HTML/CSS 混合您不必在任何地方都使用本机 UI。混合搭配： // 将本机组件用于特定于平台的 UI 保存 // 使用 HTML/CSS 进行自定义布局

定制设计

这使用常规 HTML/CSS

### 2\.对复杂组件使用本机 UI 原生 UI 组件可以更好地处理复杂的交互： * 日期选择器 → 使用 `FlutterCupertinoDatePicker` 代替 HTML 输入 * 滑块 → 使用 `FlutterCupertinoSlider` 获得原生感觉 * 分段控件 → 使用 `FlutterCupertinoSegmentedControl` ### 3\.检查组件文档请务必检查组件道具和事件的官方文档： * ### 4\.使用 TypeScript 实现类型安全所有本机 UI 包都包含 TypeScript 定义：从 '@openwebf/react-cupertino-ui' 导入类型 { FlutterCupertinoButtonProps }； const buttonProps: FlutterCupertinoButtonProps = { 变体：“填充”， onClick: () => console.log('点击') }; ## 故障排除 ### 问题：组件未渲染 **原因**：Flutter 包未安装或初始化 **解决方案**： 1.检查Flutter包是否在`pubspec.yaml`中 2.验证main.dart中调用了`installWebFCupertinoUI()` 3. 运行 `flutter pub get` 4. 重建您的 Flutter 应用 ### 问题：组件的 TypeScript 错误 **原因**：NPM 包未正确安装 **解决方案**： # 重新安装包 npm install @openwebf/react-cupertino-ui --save # 清除node_modules并重新安装 rm -rf node_modules package-lock.json npm 安装 ### 问题：找不到 Vue 组件 **原因**：需要生成Vue绑定 **解决方案**：按照上面第 2 步中的“对于 Vue + Cupertino UI”步骤，使用“webf codegen”生成 Vue 绑定。 ### 问题：Props 与 Flutter Widget 不匹配 **原因**：WebF 自动在 JavaScript 和 Dart 命名之间转换 **解决方案**： * JavaScript 使用驼峰命名法：`onClick`、`onChange`、`placeholder` * Flutter也使用camelCase，所以直接使用props map * 检查文档以获取确切的道具名称 ## 资源 * **组件库**： * **Cupertino UI 文档**： * **WebF CLI 文档**： * **反应示例**： * **Vue 示例** : ## 后续步骤设置本机 UI 后： 1. **探索组件** ：访问查看所有可用组件 2. **检查示例**：查看 React 和 Vue 的库应用程序 3. **与 HTML/CSS 混合**：在有意义的地方使用原生 UI，在其他地方使用 HTML/CSS 4. **性能**：原生 UI 组件以 60fps 渲染，具有 Flutter 级别的性能 ## 总结 * ✅ 本机 UI 库提供预构建的、特定于平台的组件 * ✅ 适用于 iOS 风格应用程序的 Cupertino UI（现已提供 30 多个组件） * ✅ 用于验证表单的表单 UI（现已提供） * ✅ Android 风格应用程序即将推出 Material UI * ✅ 先安装 Flutter 包，然后安装 npm 包 * ✅ 根据需要将原生 UI 与 HTML/CSS 混合 * ✅ 对于复杂的 UI，性能比 HTML/CSS 更好 * ✅ 完整的 React 和 Vue 支持

Webf 本机用户界面

包含技能