This topic uses lifestyle apps as a typical example to detail how the feature of one-time development for multi-device deployment is applied in actual development. Lifestyle apps provide core features such as home page display, product display, image-text details, and video browsing. Pages that display the food list, store, product details, image-text details, and videos are used as typical pages to describe how to develop these core features by complying with Differentiation, Consistency, Flexibility, and Compatibility principles. This helps you quickly and efficiently master the capabilities of one-time development for multi-device deployment.

There are unique designs for the core features of lifestyle apps to show more product choices:

The store page features dialog boxes that adapt to different forms on multiple devices for selecting product specifications, catering to user interaction habits.

The product details page displays product images that can be swiped and scaled, emphasizing the product's style and optimizing the display of large images on multiple devices.
The image-text details page utilizes various layouts to achieve one-time development for multi-device deployment and incorporates interactive design features such as image zoom-in and immersive browsing, thus providing a better browsing experience.
The video details page unifies the page theme by blurring the live streaming background, thereby achieving an immersive viewing experience.

Currently, the following device types are supported: smartphone, foldable phone, and tablet. The following practices will focus on these product forms and provide reference examples from the perspectives of UX design, architecture design, and page development, helping you develop life apps.

UX Design describes the interaction logic and common design points of life apps. You can directly refer to the design points.
Architecture Design describes the three-layer architecture of a lifestyle app.
Page Development describes how to use the adaptive layout and responsive layout to implement different UI effects based on the development sequence of areas on the page.

Before reading this topic, you need to be familiar with the ArkUI framework and the capabilities of one-time development for multi-device deployment for page development. The following sections describe how to use them in app development.

UX Design

For multi-device responsive design guide, see Lifestyle Applications.

Architecture Design

The HarmonyOS project architecture uses a tiered architecture encompassing three layers: product customization layer, basic feature layer, and common capability layer. It provides a clear, efficient, and scalable design architecture. For details, see the logical design in Layered Architecture Design.

Page Development

This section describes how to use layout capabilities to adapt a set of pages in the lifestyle app across different devices, helping you develop life apps from scratch.

[h2]Layout Capabilities

The following describes the layout capabilities used for developing each page area.

Home Page

The home page usually provides various page redirection entries (including entry icons and product cards) and recommendation information, allowing users to browse and select products. Based on the UX design diagrams for the home page on different devices, you can design the page as follows:

Divide the home page into five areas, as shown in the following figures.

Item	sm	md	lg
Home page

The following table describes the five basic areas on the home page and their implementation solutions.

No.	Area	Implementation
1	Functional area on the top	The stretching capability is used to control element sizes based on breakpoints. To be specific, the Blank component is used to fill the blank space in the middle area at the lg breakpoint.
2	Menu list	Capability of the Grid component is used to listen for breakpoint changes and change the number of columns. In addition, the aspectRatio attribute is set to implement the scaling capability.
3	Flash sales list	The List component is used to implement the extension capability.
4	Product list	The WaterFlow container is used to switch from one column to multiple columns. Specifically, set columnsTemplate of WaterFlow to 2, 3, and 4 at the sm, md, and lg breakpoints, respectively.
5	Menu navigation bar	The grid is used to listen for breakpoint changes and change the position.

Food List

The food list page displays recommended foods. On large-screen devices, a layout with more columns is used to present more information. Based on the UX design diagrams for the food list page on different devices, you can design the page as follows:

Divide the food list page into three areas, as shown in the following figures.

Item	sm	md	lg
Food list

Item

Food list

Click to enlarge

The following table describes the three basic areas on the food list page and their implementation solutions.

No.	Area	Implementation
1	Functional area on the top	The stretching capability is used to control element sizes based on breakpoints. To be specific, the Blank component is used to fill the blank space in the middle area at the lg breakpoint.
2	Menu list	The List component is used to implement the extension capability.
3	Food list	The grid layout of responsive layout is used. The aspectRatio attribute is set to implement the scaling capability.

Store Page

The store page displays information about a store and all the products it sells. Users can quickly switch between products in the sidebar, and they can also select product specifications, which will be displayed in dialog boxes that adapt to different forms of devices, catering to user interaction habits. Based on the UX design diagrams for the store page on different devices, you can design the page as follows:

Divide the store page into four areas, as shown in the following figures.

Item	sm	md	lg
Store page
Store page - sidebar
Shop page - selecting specifications

The following table describes the four basic areas on the store page and their implementation solutions.

No.	Area	Implementation
1	Store information area	The Flex component on the parent element is used for the orientation layout and the visibility attribute is set for the style switching.
2	Menu list	The Scroll component is nested within the Tabs component to create a tab nested list on the top.
3	Cart	The stretching capability is used to control element sizes based on breakpoints. To be specific, the Blank component is used to fill the blank space in the middle area at the lg breakpoint.
4	Dialog box for selecting specifications	The bindSheet and Popup attributes are used to display dialog boxes on different devices.

Store information area

Set the direction attribute of the Flex component to switch the layout to the top-down or left-right mode based on breakpoints, and set the visibility attribute to switch visibility based on breakpoints.

Flex({
  direction: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG && !this.ifShowSides ?
  FlexDirection.Row : FlexDirection.Column,
  justifyContent: FlexAlign.Start
}) {
  ShopHeader()
    .visibility(this.currentBreakpoint !== BreakpointConstants.BREAKPOINT_LG || this.ifShowSides ?
    Visibility.Visible : Visibility.None)
  ShopSideBar()
    .width(CommonConstants.THIRTY_SEVEN_PERCENT)
    .flexShrink(0)
    .visibility(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG && !this.ifShowSides ?
    Visibility.Visible : Visibility.None)
  ShopOrderList()
    .height(CommonConstants.FULL_PERCENT)
  // ...
}

Menu list

Use the Scroll component nested within the Tabs component to switch between menu tabs. The detailed operations are as follows:

Tabs({ controller: this.topTabsController }) {
  ForEach(this.tabsList, () => {
    TabContent() {
      ShopMenu().width(CommonConstants.FULL_PERCENT)
    }
  })
}

Row() {
  Column() {
    // ...
  }
  // ...
  Scroll(this.scroller) {
    Column() {
      // ...
    }
  }
  // ...
  .nestedScroll({ scrollForward: NestedScrollMode.PARENT_FIRST, scrollBackward: NestedScrollMode.SELF_FIRST })
}

Dialog box for selecting specifications

Use the bindSheet component at the sm and md breakpoints and the PopUp component at the lg breakpoint to create a dialog box that responds to touch events.

Text($r('app.string.select_specification'))
// ...
  .onClick(() => {
    if (this.currentBreakpoint !== BreakpointConstants.BREAKPOINT_LG) {
      this.showPop = true;
    } else {
      this.showPopUp = true;
      this.showPopUpChange = true;
    }
  })
  .bindSheet($$this.showPop, this.popBuilder(), {
    height: SheetSize.FIT_CONTENT,
    backgroundColor: Color.White,
    title: {
      title: $r('app.string.select_specification')
    },
    maskColor: $r('app.color.forty_black')
  })
  .bindPopup(this.showPopUp, {
    builder: this.popBuilder,
    placement: Placement.Left,
    width: $r('app.float.popup_width'),
    mask: { color: $r('app.color.forty_black') },
    onStateChange: (e) => {
      if (!e.isVisible) {
        this.showPopUp = false;
      }
    }
  })

Product Details

The product details page displays specific information about a product and features an interactive design that allows users to view the complete product thumbnail by swiping up and down. This design provides a more intuitive display of the product. Users can also use the sidebar to view the product information, making the interaction more convenient. Based on the UX design diagrams for the product details page on different devices, you can design the page as follows:

Divide the product details page into three areas, as shown in the following figures.

Item	sm	md	lg
Product details page
Product details page - sidebar

The following table describes the three basic areas on the product details page and their implementation solutions.

No.	Area	Implementation
1	Product information area	The onScrollFrameBegin() callback is used to listen for the scroll events and adjust the image height accordingly, thus creating an interactive effect of swiping up or down to view the thumbnail.
2	Product information area	The Column component is used. The stretching capability is used to control element sizes based on breakpoints. In addition, the Blank component is used to fill the blank space in the middle area.
3	Cart	The stretching capability is used to control element sizes based on breakpoints. In addition, the Blank component is used to fill the blank space in the middle area.

Final effect - Interactive animation (swiping up or down to view the complete thumbnail)

Use the onScrollFrameBegin() callback to listen for the scroll events and adjust the image height accordingly.

@State ifPictureExpansion: Boolean = false;
@State imageHeightExtension: number = 0;
@State imageHeightFold: number = 0;
@State imageHeight: number = 0;
// ...
build() {
  NavDestination() {
    Scroll(this.informationScroller) {
      GridRow({
        columns: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG && !this.ifShowSides ?
        BreakpointConstants.GRID_ROW_COLUMNS[2] : 1
      }) {
        GridCol({
          span: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG && !this.ifShowSides ?
          BreakpointConstants.GRID_COLUMN_SPANS[7] : 1
        }) {
          if (this.currentBreakpoint !== BreakpointConstants.BREAKPOINT_LG || this.ifShowSides) {
            DishHead({
              ifPictureExpansion: this.ifPictureExpansion,
              imageHeightExtension: this.imageHeightExtension,
              imageHeightFold: this.imageHeightFold,
              imageHeight: this.imageHeight
            })
          } else {
            DishSideBar()
          }
        }

        // ...
      }
    }
    // ...
    .onScrollFrameBegin((offset: number, state: ScrollState) => {
      if (!this.ifPictureExpansion && offset < 0) {
        this.imageHeight = this.imageHeightExtension;
        this.ifPictureExpansion = true;
        return { offsetRemain: 0 };
      } else if (this.ifPictureExpansion && offset > 0) {
        this.imageHeight = this.imageHeightFold;
        this.ifPictureExpansion = false;
        return { offsetRemain: 0 };
      } else {
        return { offsetRemain: offset };
      }
    })
  }
  // ...
}

Micro Details Page

The micro details page displays recommended product information. The number of displayed columns varies depending on the device, so more information can be displayed on the device with a larger screen. Based on the UX design diagrams for the micro details page on foldable phones, you can design the page as follows:

The display effects are as follows.

Item	sm	md	lg
Micro details page

Area	Implementation
Micro details page	The WaterFlow container is used to switch from one column to multiple columns. Specifically, set columnsTemplate of WaterFlow to 1, 2, and 3 at the sm, md, and lg breakpoints, respectively.

Movie List Page

The movie list page displays recommended movie information. There are three design paradigms for screens at the lg breakpoint. You can refer to related descriptions as needed. Based on the UX design diagrams for the movie list page on different devices, you can design the page as follows:

Divide the movie list page into three areas, as shown in the following figures.

Item	sm	md	lg
Movie list page - paradigm 1
Movie list page - paradigm 2
Movie list page - paradigm 3

The following table describes the three basic areas on the movie list page and their implementation solutions.

No.	Area	Implementation
1	Functional area on the top	The stretching capability is used to control element sizes based on breakpoints. In addition, the Blank component is used to fill the blank space in the middle area.
2	Upcoming	The List component is used to implement the extension capability. listDirection is used to adjust the direction.
3	Now showing	The WaterFlow container is used to switch from one column to multiple columns. Specifically, set columnsTemplate of WaterFlow to 1, 2, and 3 at the sm, md, and lg breakpoints, respectively.

Movie Details Page

The movie details page displays specific information about a movie. The page uses a left-right layout on lg screens to maximize space utilization. Based on the UX design diagrams for the movie details page on different devices, you can design the page as follows:

Divide the movie details page into three areas, as shown in the following figures.

Item	sm	md	lg
Movie details page

The following table describes the three basic areas on the movie details page and their implementation solutions.

No.	Area	Implementation
1	Functional area on the top	The stretching capability is used to control element sizes based on breakpoints.
2	Movie information	The grid layout of responsive layout is used. The Grid component is used to implement the orientation layout and the aspectRatio attribute is set to implement the scaling capability.
3	Movie details area	The Column component is nested within the Tabs component. For different module titles, the stretching capability is used to control element sizes based on breakpoints, the Blank component is used to fill the blank space in the middle area. Same as "Suggested searches" in "Long Video", the content can be extended using the List component.

Movie Theater Selection Page

The movie theater selection page displays a list of movie theaters for users to choose from, and provides movie poster previews for easy switching. Based on the UX design diagrams for the movie theater selection page on different devices, you can design the page as follows:

Divide the movie theater selection page into three areas. The display effects are as follows.

Item	sm	md	lg
Movie theater selection page - Paradigm 1

The following table describes the three basic areas on the movie theater selection page and their implementation solutions.

No.	Area	Implementation
1	Functional area on the top	The stretching capability is used to control element sizes based on breakpoints.
2	Movie poster	The Swiper component is used. You can specify the displayCount attribute to implement the proportional scaling capability and set the aspectRatio attribute to implement the scaling capability.
3	Movie list	The Tabs and List components are used to implement the repetition layout.

Home Page - Recommendation Page

The recommendation page on the home page displays brief information about recommended images and texts. The number of displayed columns varies depending on the device, so more information can be displayed on the device with a larger screen. Based on the UX design diagrams for the recommendation page on different devices, you can design the page as follows:

Divide the home page - recommendation page into three areas, as shown in the following figures.

Item	sm	md	lg
Home page - Recommendation page

The following table describes the three basic areas on the recommendation page and their implementation solutions.

No.	Area	Implementation
1	Functional area on the top	The stretching capability is used to control element sizes based on breakpoints. In addition, the Blank component is used to fill the blank space in the middle area.
2	Recommendation area	The WaterFlow container is used to switch from one column to multiple columns. Specifically, set columnsTemplate of WaterFlow to 2, 3, and 4 at the sm, md, and lg breakpoints, respectively.
3	Menu navigation bar	Breakpoint changes are listened to adjust the position of the menu navigation bar.

Home Page - Follow Page

The home page - follow page displays a list of followed accounts and their latest image-text posts. Three design paradigms are provided for you to choose from. Based on the UX design diagrams for the home page - follow page on different devices, you can design the page as follows:

Divide the home page - follow page into four areas, as shown in the following figures.

Item

Home page - follow page - paradigm 1

Click to enlarge

Home page - follow page - paradigm 2

Click to enlarge

Home page - follow page - paradigm 3

Click to enlarge

The following table describes the four basic areas on the home page and their implementation solutions.

No.	Area	Implementation
1	Functional area on the top	The stretching capability is used to control element sizes based on breakpoints. In addition, the Blank component is used to fill the blank space in the middle area.
2	Follow list	The List component is used to implement the extension capability.
3	Follow details	The List component is used to implement the repetition layout.
4	Menu navigation bar	Breakpoint changes are listened to adjust the position of the menu navigation bar.

Short Video Details Page

The short video details page is used for video playback. This page provides functional buttons and an area for users to input comments while watching videos. Based on the UX design diagrams for the short video details page on different devices, you can design the page as follows:

Divide the short video details page into four areas, as shown in the following figures.

Item	sm	md	lg
Short video details page - example 1
Short video details page - example 2
Sidebar - comments
Short video details page - tab information bar

The following table describes the four basic areas on the short video details page and their implementation solutions.

No.	Area	Implementation
1	Short video display area	The Stack component is used to implement the stacking effect of the Video, Text, and Image components. .align(Alignment.Center) is used to make the Video component centered.
2	Menu navigation bar	Breakpoint changes are listened to adjust the position of the menu navigation bar.
3	Video comment area	The List component is used to implement the repetition layout. At the sm breakpoint, the bindSheet component is used to implement semi-modal layout. At the md and lg breakpoints, the Row component is used to implement left-right layout.
4	Tab information bar	The List component is used to implement the repetition layout.

Live Streaming Page

The live streaming page displays live streaming and user comments. The background is blurred to provide users with a more immersive viewing experience. Based on the UX design diagrams for the live streaming page on different devices, you can design the page as follows:

Divide the live streaming page into three areas, as shown in the following figures.

Item	sm	md	lg
Live streaming page

The following table describes the three basic areas on the live streaming page and their implementation solutions.

No.	Area	Implementation
1	Live streaming area	The Stack container component is used to implement the stacking effect of the Video, Text, and Image components. .align(Alignment.Center) is used to make the Video component centered. The code for blurring the background is provided later.
2	Comment area	The List component is used to implement the repetition layout.
3	Comment input area	The TextInput component is used.

Live streaming area with background blurred

SideBarContainer(SideBarContainerType.Embed) {
  LivingComments()
    .width(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
    CommonConstants.FORTY_PERCENT_STRING : CommonConstants.THIRTY_SEVEN_PERCENT)
  LivingHome()
}
.width(CommonConstants.FULL_PERCENT)
.backgroundImage($r('app.media.fm2_img'))
.backgroundBlurStyle(BlurStyle.BACKGROUND_THICK, {
  colorMode: ThemeColorMode.DARK,
  adaptiveColor: AdaptiveColor.DEFAULT
})
.backgroundImageSize({
  width: CommonConstants.FULL_PERCENT,
  height: CommonConstants.FULL_PERCENT
})

Image-Text Details Page

The image-text details page displays product details. Based on the UX design diagrams for the image-text details page on different devices, you can design the page as follows:

Divide the image-text details page into seven areas, as shown in the following figures.

Item	sm	md	lg
Image-text details page
Image-text details page - Image above text
Sidebar - Product details
Sidebar - Profile

The following table describes the seven basic areas on the image-text details page and their implementation solutions.

No.	Area	Implementation
1	Functional area on the top	The stretching capability is used to control element sizes based on breakpoints. In addition, the Blank component is used to fill the blank space in the middle area.
2	Image area	The Swiper component is used. You can set the aspectRatio attribute to implement the scaling capability.
3	Article details	The Column component is used to display article details.
4	Functional area at the bottom	The stretching capability is used to control element sizes based on breakpoints.
5	Comment area	The TextInput component is used.
6	Product details	The Column component is used. The aspectRatio attribute is set to implement the scaling capability.
7	Profile	The List component is used to implement the repetition layout.

There are three image-above-text paradigms, and you can adjust them through the swiper component.
Paradigm 1

Paradigm 2

Paradigm 3

Interaction effects

Tap to Zoom	Swipe to Zoom with Two Fingers	Swipe Up for Immersive Browsing

Image(item)
// ...
  .onClick(() => {
    this.getUIContext().animateTo({
      duration: CommonConstants.ANIMATE_DURATION,
      curve: Curve.Friction
    }, () => {
      this.isFullScreen = true;
      this.fullImageIndex = index;
    });
  })
  .gesture(
    PinchGesture({ fingers: 2 })
      .onActionUpdate((event: GestureEvent) => {
        this.getUIContext().animateTo({
          duration: CommonConstants.ANIMATE_DURATION,
          curve: Curve.Friction
        }, () => {
          this.isFullScreen = true;
          this.fullImageIndex = index;
        });
      })
  )

Sample Code

Convenient Life

目录

Lifestyle

Overview

UX Design

Architecture Design

Page Development

[h2]Layout Capabilities

Sample Code