ArkUI API Guardrails
Use these rules before writing ArkUI component constructors, modifiers, enum values, or callbacks.
Component constructors
Tabs(options?)accepts options includingbarPosition,index, andcontroller.TabContent()takes no object parameter; set the label with.tabBar(...).List({ space })andGrid()contain their required item child components.Row({ space })andColumn({ space })take spacing in the constructor.Flex()does not take aspaceoption; use margins on children when needed.Stack({ alignContent })controls stack alignment; do not use row/column alignment methods on it.
Modifier names
Use full ArkUI modifier names:
.backgroundColor(...).borderRadius(...).fontSize(...).fontColor(...).fontWeight(...).textAlign(...).objectFit(...).textOverflow(...)
Do not use shorthand names from other UI systems, including shortened background, radius, text size, or text color modifiers. Do not use Android layout constants for width or height.
Modifier ownership
Textowns text modifiers including.fontSize(...),.fontColor(...),.fontWeight(...),.textAlign(...),.maxLines(...), and.textOverflow(...).Imageowns image modifiers including.objectFit(...).ColumnandRowown layout alignment, but their alignment enum types differ.Buttonlabel styling is often clearer by placing styledTextinsideButtonwhen project style requires custom text styling.Listowns list-level direction, edge, divider, and scroll behavior;ListItemowns per-row content.
Parameters and callbacks
marginandpaddinguse a number, string, or object with edge names. Do not use multi-argument CSS-style shorthand.AlertDialogbutton entries use{ value: '确定', action: () => {} }.ActionSheetentries usesheets.- Popup state-change callbacks receive an event object with visibility state.
- Event callback parameter types should be explicit when inference is unclear.
Enums and resources
- Use ArkUI enum names with exact casing, for example
TextAlign.Center,FontWeight.Bold, andBarPosition.End. - Do not pass string values where an enum is expected.
- Do not guess system symbol or system color names. Use existing project resources or verified names.
UIContext-sensitive APIs
When a project already uses UIContext for UI operations, follow it for:
- Toast prompts through
this.getUIContext().getPromptAction(). - Alert dialogs through
this.getUIContext().showAlertDialog(...). - Router access through
this.getUIContext().getRouter(). - Animation through
this.getUIContext().animateTo(...).
If the current project has a wrapper for routing, dialog, toast, or logging, use the wrapper instead of introducing a new pattern.