ArkUI Layout Development (ArkTS)

What should I do if the height settings in position do not take effect?

Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)

Solution

When position is set for a container component, it is taken out of normal flow and works independently from the outer container. In this case, the height does not take effect. You can replace the outer container with a stack to solve this issue.

How do I implement horizontal scrolling on a <Grid> component?

Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)

Set rowsTemplate (the number of rows) for the <Grid> component and do not set columnsTemplate (the number of columns). In this way, the <Grid> component scrolls horizontally when its content does not fit within its width.

What should I do if the <List> component cannot be dragged to the bottom when it is used with another component and does not have the size specified?

Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)

Add the layoutWeight attribute for the <List> component so that it takes up the remaining height (or width, depending on the scrolling direction) adapatively.

By default, the <List> component, as a scrollable container, takes up the entire screen height. When it is used with any component whose height is fixed, you need to explicitly add the layoutWeight attribute for the <List> component so that it takes up the remaining height instead of the entire screen height.

Can tab switching be disabled for the <Tabs> component?

Applicable to: OpenHarmony 3.2 Release (API version 9)

No. This feature is not supported.

How do I intercept the onBackPress event so that it does not trigger page return?

Applicable to: OpenHarmony 3.2 Release (API version 9)

If true is returned in onBackPress, the page executes its own return logic instead of the default return logic.

Reference

Applicable to: OpenHarmony 3.2 Release (API version 9)

You can use the sticky attribute of the <List> component together with the <ListItemGroup> component. Specifically, set the sticky attribute of the <List> component to StickyStyle.Header and set the header parameter of the corresponding <ListItemGroup> component.

Reference

Adding a Sticky Header

How do I configure only specified UI components to move up to avoid the open keyboard?

Applicable to: OpenHarmony 4.0 Release (API version 10)

Solution

To configure the UI logic for keyboard avoidance, use expandSafeArea.

Reference

What methods are available for combining text and images?

Applicable to: OpenHarmony 4.0 Release (API version 10)

Solution

To display text with images, you can nest an <ImageSpan> component in a <Text> component or nest <Text> and <Image> components in a container component (such as <Row> and <Colunm>. The former is recommended.
If editing is needed, use the <RichEditor> component.

Reference

How do I implement a layout similar to that achieved by CoordinatorLayout?

Applicable to: OpenHarmony 4.0 Release (API version 10)

Solution

You can implement nested scrolling in a scrollable component with the nestedScroll attribute.

Reference

Applicable to: OpenHarmony 4.0 Release (API version 10)

Solution

Configure the navigation bar as the second child component, that is, the content area, of the <SideBarContainer> component. In this way, the sidebar takes up only its own width and does not block other part of the navigation bar.

Reference

SideBarContainer

What should I if the UI is not re-rendered with ForEach and LazyForEach when the data source is changed?

Applicable to: OpenHarmony 4.0 Release (API version 10)

Solution

If the default key generator is used, the framework automatically generates a key based on item and index, that is, (item: T, index: number) => { return index + '__' + JSON.stringify(item); }. When the data source of a state variable is changed, ForEach or LazyForEach detects the key change, and triggers a component reconstruction to update the UI.

Reference

ForEach: Rendering of Repeated Content

How do I decouple a dialog box from pages? What are the best practices? (API version 10)

Solution

A dialog box must be bound a component and triggered by events. Its content can be defined with a global builder. It only needs to be defined once.

Global builder:

Syntax:

@Builder function MyGlobalBuilderFunction(){ ... }

Usage:

MyGlobalBuilderFunction()

A custom global build function is accessible throughout the application. As such, it is recommended if no own state is involved.

Reference