开源鸿蒙 Child Component Configuration

  • 2022-08-09
  • 浏览 (531)

Child Component Configuration

For a component that supports child components, for example, a container component, add the UI descriptions of the child components inside “{ … }”. The <Column>, <Row>, <Stack>, <Button>, <Grid>, and <List> components are container components.

  • The following is a simple example of the <Column> component:
  Column() {
      Text('Hello')
          .fontSize(100)
      Divider()
      Text(this.myText)
          .fontSize(100)
          .fontColor(Color.Red)
  }
  • Multiple child components can be nested in the <Column> component, as shown below:
  Column() {
      Column() {
          Button() {
              Text('+ 1')
          }.type(ButtonType.Capsule)
          .onClick(() => console.log ('+1 clicked!'))
          Image('1.jpg')
      }
      Divider()
      Column() {
          Button() {
              Text('+ 2')
          }.type(ButtonType.Capsule)
          .onClick(() => console.log ('+2 clicked!'))
          Image('2.jpg')
      }
      Divider()
      Column() {
          Button() {
              Text('+ 3')
          }.type(ButtonType.Capsule)
          .onClick(() => console.log('+3 clicked!'))
          Image('3.jpg')
      }
  }.alignItems(HorizontalAlign.Center) // center align components inside Column

你可能感兴趣的文章

开源鸿蒙 UI Development

开源鸿蒙 ArkUI Overview

开源鸿蒙 File Organization

开源鸿蒙 app.js

开源鸿蒙 “js” Tag

开源鸿蒙 Lifecycle

开源鸿蒙 Multi-Language Capability

开源鸿蒙 Resource Limitations and Access

开源鸿蒙 CSS

开源鸿蒙 HML

0  赞