开源鸿蒙 子组件配置

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

子组件配置

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

  • 以下是简单的Column示例:

    Column() {
      Text('Hello')
          .fontSize(100)
      Divider()
      Text(this.myText)
          .fontSize(100)
          .fontColor(Color.Red)
    }
    
  • 可以嵌套多个子组件:

    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开发

开源鸿蒙 方舟开发框架概述

开源鸿蒙 文件组织

开源鸿蒙 app.js

开源鸿蒙 js标签配置

开源鸿蒙 生命周期

开源鸿蒙 多语言支持

开源鸿蒙 资源限定与访问

开源鸿蒙 CSS语法参考

开源鸿蒙 HML语法参考

0  赞