UIコンポーネント
実装ステータス: runtime discoveryが正本です。現在のHostは通常のstack/grid/form/list/controlに加え、
EmptyView、If、GeometryReader、Canvas、ForEach、SearchField、Searchable、ReorderList、SwipeActions、ContextMenu、ContentUnavailableView、MediaImage、NavigationTitle、Toolbar、Map、WebView、VideoPlayer、AudioPlayer、CameraPreview、BarcodeScanner、ARViewを実装しています。
input componentは、two-way updateのためstate.profile.name、state.enabled、global.search.queryのような明示的props.bind pathを使います。nested state/global pathは実行可能なv1 behaviorです。bind値の変更後、change eventからactionを呼び出せます。
ForEachはprops.itemsにstate arrayを指す通常のApsule interpolation（例: state.items expression）、props.itemにiteration alias（default item）、props.keyにstable object key（default id）を使います。子孫はitem.contentのようにalias fieldをinterpolateできます。repeated content内のtap actionはiteration scope objectを最初の引数として受け取るため、各row用にstatic JSONへIDを複製しなくても選択itemを特定できます。
TextEditorはTextFieldのmultiline版です。同じprops.bind state bindingを使い、minimum editor heightとしてprops.minHeightを受け取ります。
TextField、SecureField、TextEditor、SearchFieldはkeyboardType、autocapitalization、autocorrection、submitLabelなどのnative input hintを受け取ります。Sheetはdetents（medium、large、fraction:<0-1>、height:<points>）、dragIndicator、interactiveDismissDisabledに対応します。
Pickerはprops.optionsに{ "label": "...", "value": "..." } object arrayを使い、string valueをbindします。DatePickerはISO-8601 stringをbindし、既存numeric Unix timestampも受け付けます。props.dateOnly: trueでdateのみに制限します。ColorPickerは#RRGGBBまたは#RRGGBBAA stringをbindします。Sheet、Alert、ConfirmationDialog、DisclosureGroupはboolean props.bindを使います。Alertはoptional confirm eventを呼び出せます。NavigationLinkはprops.routeを使って同じruntime/stateを保持したままproject routeを読み込みます。
LazyVGridはprops.columns、LazyHGridはprops.rowsを使い、両方ともprops.spacingとprops.itemSpacingを受け取ります。TabViewはstring selectionをbindし、各direct childからtabTitle、tabSystemName、optional tabValueを読みます。props.hideTabBar: trueではnative tab selectionを保ちながらtab barを隠せます。ConfirmationDialogはdirect Button childをnative actionとして描画し、props.roleのdestructiveとcancelを尊重します。ShareLinkはprops.urlまたはstring props.valueを受け取ります。
shape componentはprops.color、props.width、props.heightを受け取ります。optional props.widthBinding/props.heightBindingは通常のstate interpolationからnumeric valueを解決できます。指定された場合はstatic width/heightを上書きしつつ、older Host向けbackward-compatible fallbackとしてstatic valueも残します。RoundedRectangleはprops.cornerRadiusにも対応します。Image/MediaImageはpackaged assetまたはProject-sandbox media pathを解決できます。Mapはinitial regionとmarker/polyline collectionを受け取り、regionChange/mapTapをemitします。WebViewはprops.urlを受け取り、navigate/error/messageをemitし、host.webViewからcontrolできます。VideoPlayerとAudioPlayerはProject-sandboxまたはHTTP media URLを解決します。CameraPreviewはnative preview surfaceで、capture自体はhost.cameraからimperativeに行います。
v1の目標はSwiftUI APIをすべてmirrorすることではありません。native appearanceを維持しながら、一般的な小規模appを幅広く作るためのbuilding blockを揃えることです。
SwiftUI coverageをpercentageで評価することに大きな意味はありません。SwiftUIにはlayout、scene、graphics、accessibility、gesture、framework integration、platform-specific featureまで非常に広いAPI surfaceがあるためです。Apsuleでは代わりに広いapp-type coverageを目標にします。
Layout
| Type | 用途 |
|---|---|
VStack | childを縦方向に並べる。 |
HStack | childを横方向に並べる。 |
ZStack | childを重ねて配置する。 |
Spacer | alignmentに使える可変empty space。 |
Divider | native separator。 |
ScrollView | contentを縦/横にscrollする。 |
LazyVStack | 大きな縦stackを効率的に描画する。 |
LazyHStack | 大きな横stackを効率的に描画する。 |
LazyVGrid | 縦方向へflowする効率的なgrid。 |
LazyHGrid | 横方向へflowする効率的なgrid。 |
GeometryReader | 必要な場合にavailable geometry/sizeへ反応する。多用しない。 |
Canvas | line/rectangle/ellipse/text/polyline command arrayを描画し、drag coordinateを受け取る。 |
If | props.conditionがtruthyなら最初のchild、そうでなければoptionalな2番目のchildを描画する。 |
Textとlabel
| Type | 用途 |
|---|---|
Text | textを描画する。 |
Label | native icon + textの組み合わせ。 |
Inputとcontrol
| Type | 用途 |
|---|---|
Button | actionを実行する。 |
TextField | 通常のtext input。 |
TextEditor | multiline text input。 |
SecureField | sensitive inputを隠して入力する。 |
SearchField | compactなsearch-style text input。 |
Searchable | child contentへnative search UIを適用する。 |
Toggle | boolean on/off input。 |
Slider | numeric range input。 |
Picker | 選択肢から選ぶ。 |
DatePicker | date/time input。 |
ColorPicker | color input。 |
Menu | action/optionのcompact menu。 |
Data/content
| Type | 用途 |
|---|---|
Image | local/system image。 |
AsyncImage | URLから読み込むremote image。 |
ProgressView | loading indicatorまたはprogress。 |
Gauge | native gauge/measurement visualization。 |
List | native structured list。 |
ReorderList | bound state/global arrayを使うnative editable list。 |
ForEach | collection itemごとにUIを繰り返す。 |
Section | 関連row/contentをgroup化する。 |
Form | native form/settings風structure。 |
DisclosureGroup | contentをexpand/collapseする。 |
SwipeActions | contentへnative leading/trailing swipe actionを追加する。 |
ContextMenu | contentへnative context menuを追加する。 |
MediaImage | Project assetまたはProject sandboxのimageを表示する。 |
VideoPlayer | AVPlayer-backed native video playback。 |
AudioPlayer | compactなAVPlayer-backed audio playback。 |
ContentUnavailableView | native empty/error-state presentation。 |
Navigationとpresentation
| Type | 用途 |
|---|---|
NavigationStack | native navigation container。routeはproject levelで定義したまま。 |
NavigationLink | 必要な場合のdeclarative route trigger。 |
NavigationTitle | route-local native navigation titleを設定する。 |
Toolbar | project-controlled native toolbar itemを追加する。 |
TabView | main tab-based application navigation。 |
Sheet | modal sheetを表示する。 |
Alert | native alert。 |
ConfirmationDialog | native action/confirmation dialog。 |
Link | URLを開く。 |
ShareLink | native share entry point。 |
Shapeとgraphics
| Type | 用途 |
|---|---|
Rectangle | rectangle shape。 |
RoundedRectangle | rounded rectangle shape。 |
Circle | circle shape。 |
Capsule | capsule/pill shape。 |
Native framework-backed UI
| Type | 用途 |
|---|---|
Map | MapKit-backed native map UI。 |
WebView | WebKit-backed web content surface。Apsule全体のrendererではなく明示的component。 |
CameraPreview | Camera permissionがある場合のlive native camera preview。 |
BarcodeScanner | AVCaptureMetadataOutput backed live QR/barcode scanner。scan eventでpayload/symbologyをemitする。 |
ARView | optional plane detectionを備えた基本RealityKit/ARKit world-tracking surface。 |
Liquid Glass
Liquid Glassはspecial component typeを増やすのではなく、主にstyle/modifierとして表現します。たとえば通常のButtonが対応するglass styleをopt-inできます。
Hostは対応glass propertyを、Host SDK/OSで利用可能なnative SwiftUI APIへmappingします。未対応effectはweb/CSS effectで黙って近似せず、runtime validationで報告しなければなりません。
今後のUI候補
Chart、rich-text editor、高度なcustom layout protocol、accessibility-specialized component、domain-specific Health/Home UIは、独立したv1 componentではありません。generic UI surfaceで十分な場合、それらのdata/OS integrationはProject JavaScriptから引き続き利用できます。