子组件配置


子组件配置

对于支持子组件配置的组件,例如容器组件,在“{ ... }”里为组件添加子组件的UI描述。Column、Row、Stack、Button、Grid和List组件都是容器组件。

  • 以下是简单的Column示例:

    Column() {
        Text('Hello')
            .fontSize(100)
        Divider()
        Text(this.myText)
            .fontSize(100)
            .fontColor(Color.Red)
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
  • 可以嵌套多个子组件:

    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
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25