一键导入
webf-native-ui
Setup and use WebF's Cupertino UI library to build native iOS-style UIs with pre-built components instead of crafting everything with HTML/CSS. Use when building iOS apps, adding native UI components, or improving UI performance.
菜单
Setup and use WebF's Cupertino UI library to build native iOS-style UIs with pre-built components instead of crafting everything with HTML/CSS. Use when building iOS apps, adding native UI components, or improving UI performance.
基于 SOC 职业分类
Develop custom WebF native plugins based on Flutter packages. Create reusable plugins that wrap Flutter/platform capabilities as JavaScript APIs. Use when building plugins for native features like camera, payments, sensors, file access, or wrapping existing Flutter packages.
Develop custom native UI libraries based on Flutter widgets for WebF. Create reusable component libraries that wrap Flutter widgets as web-accessible custom elements. Use when building UI libraries, wrapping Flutter packages, or creating native component systems.
Check Web API and CSS feature compatibility in WebF - determine what JavaScript APIs, DOM methods, CSS properties, and layout modes are supported. Use when planning features, debugging why APIs don't work, or finding alternatives for unsupported features like IndexedDB, WebGL, float layout, or CSS Grid.
Understand and work with WebF's async rendering model - handle onscreen/offscreen events and element measurements correctly. Use when getBoundingClientRect returns zeros, computed styles are incorrect, measurements fail, or elements don't layout as expected.
Create high-performance infinite scrolling lists with pull-to-refresh and load-more capabilities using WebFListView. Use when building feed-style UIs, product catalogs, chat messages, or any scrollable list that needs optimal performance with large datasets.
Develop custom WebF native plugins based on Flutter packages. Create reusable plugins that wrap Flutter/platform capabilities as JavaScript APIs. Use when building plugins for native features like camera, payments, sensors, file access, or wrapping existing Flutter packages.
| name | webf-native-ui |
| description | Setup and use WebF's Cupertino UI library to build native iOS-style UIs with pre-built components instead of crafting everything with HTML/CSS. Use when building iOS apps, adding native UI components, or improving UI performance. |
Instead of crafting all UIs with HTML/CSS, WebF provides pre-built native UI libraries that render as native Flutter widgets with full native performance. These components look and feel native on each platform while being controlled from your JavaScript code.
Native UI libraries are collections of UI components that:
Description: iOS-style components following Apple's Human Interface Guidelines
Platforms: iOS, macOS (optimized for iOS design)
Component Count: 30+ components
Available Components:
NPM Packages:
@openwebf/react-cupertino-ui@openwebf/vue-cupertino-uiFlutter Package: webf_cupertino_ui
Documentation: https://openwebf.com/en/ui-components/cupertino
If you have access to the Flutter project hosting your WebF app:
For Cupertino UI:
pubspec.yamldependencies:
webf_cupertino_ui: ^1.0.0
flutter pub getimport 'package:webf/webf.dart';
import 'package:webf_cupertino_ui/webf_cupertino_ui.dart';
void main() {
WebFControllerManager.instance.initialize(WebFControllerManagerConfig(
maxAliveInstances: 2,
maxAttachedInstances: 1,
));
// Install Cupertino UI components
installWebFCupertinoUI();
runApp(MyApp());
}
For React:
npm install @openwebf/react-cupertino-ui
For Vue:
npm install @openwebf/vue-cupertino-ui
React Example:
import { FlutterCupertinoButton, FlutterCupertinoTextField } from '@openwebf/react-cupertino-ui';
export function MyComponent() {
return (
<div>
<FlutterCupertinoTextField
placeholder="Enter your name"
onChanged={(value) => console.log('Value:', value)}
/>
<FlutterCupertinoButton
variant="filled"
onClick={() => console.log('Clicked')}
>
Submit
</FlutterCupertinoButton>
</div>
);
}
Vue Example:
<template>
<div>
<FlutterCupertinoTextField
placeholder="Enter your name"
@changed="handleChange"
/>
<FlutterCupertinoButton
variant="filled"
@click="handleClick"
>
Submit
</FlutterCupertinoButton>
</div>
</template>
<script setup>
import { FlutterCupertinoTextField, FlutterCupertinoButton } from '@openwebf/vue-cupertino-ui';
const handleChange = (value) => {
console.log('Value:', value);
};
const handleClick = () => {
console.log('Clicked');
};
</script>
See the Native UI Component Reference for a complete list of available components and their properties.
import {
FlutterCupertinoFormSection,
FlutterCupertinoFormRow,
FlutterCupertinoTextField,
FlutterCupertinoButton
} from '@openwebf/react-cupertino-ui';
export function ProfileForm() {
return (
<FlutterCupertinoFormSection header="Profile Information">
<FlutterCupertinoFormRow label="Name">
<FlutterCupertinoTextField placeholder="John Doe" />
</FlutterCupertinoFormRow>
<FlutterCupertinoFormRow label="Email">
<FlutterCupertinoTextField
placeholder="john@example.com"
keyboardType="email"
/>
</FlutterCupertinoFormRow>
<FlutterCupertinoButton variant="filled">
Save Changes
</FlutterCupertinoButton>
</FlutterCupertinoFormSection>
);
}
import {
FlutterCupertinoListSection,
FlutterCupertinoListTile,
FlutterCupertinoSwitch
} from '@openwebf/react-cupertino-ui';
export function SettingsScreen() {
return (
<FlutterCupertinoListSection header="Settings">
<FlutterCupertinoListTile
title="Notifications"
trailing={<FlutterCupertinoSwitch value={true} />}
/>
<FlutterCupertinoListTile
title="Dark Mode"
trailing={<FlutterCupertinoSwitch value={false} />}
/>
</FlutterCupertinoListSection>
);
}
import { FlutterCupertinoAlertDialog } from '@openwebf/react-cupertino-ui';
export function ConfirmationDialog({ onConfirm, onCancel }) {
return (
<FlutterCupertinoAlertDialog
title="Confirm Action"
content="Are you sure you want to proceed?"
actions={[
{ label: 'Cancel', onPress: onCancel },
{ label: 'Confirm', onPress: onConfirm, isDestructive: true }
]}
/>
);
}
You don't have to use native UI everywhere. Mix and match:
// Use native components for platform-specific UIs
<FlutterCupertinoButton variant="filled">
Save
</FlutterCupertinoButton>
// Use HTML/CSS for custom layouts
<div className="custom-layout">
<h1>Custom Design</h1>
<p>This uses regular HTML/CSS</p>
</div>
Native UI components handle complex interactions better:
FlutterCupertinoDatePicker instead of HTML inputFlutterCupertinoSlider for native feelFlutterCupertinoSegmentedControlAlways check the official documentation for component props and events:
All native UI packages include TypeScript definitions:
import type { FlutterCupertinoButtonProps } from '@openwebf/react-cupertino-ui';
const buttonProps: FlutterCupertinoButtonProps = {
variant: 'filled',
onClick: () => console.log('Clicked')
};
Cause: Flutter package not installed or initialized
Solution:
pubspec.yamlinstallWebFCupertinoUI() is called in main.dartflutter pub getCause: NPM package not installed correctly
Solution:
# Reinstall the package
npm install @openwebf/react-cupertino-ui --save
# Clear node_modules and reinstall
rm -rf node_modules package-lock.json
npm install
Cause: Vue bindings need to be generated
Solution: Follow the "For Vue + Cupertino UI" steps in Step 2 above to generate Vue bindings using webf codegen.
Cause: WebF automatically converts between JavaScript and Dart naming
Solution:
onClick, onChange, placeholderAfter setting up native UI: