openharmony ets容器组件代码示例

原文地址：zh-cn/application-dev/reference/arkui-ts/Readme-CN.md · OpenHarmony/docs - Gitee.com

Column

Column() {
  Column() {
    Text('HorizontalAlign.End').width('50%').height(50).backgroundColor(0xAFEEEE)
  }.width('100%')
  .alignItems(HorizontalAlign.End)

  Column() {
    Text('HorizontalAlign.Start').width('50%').height(50).backgroundColor(0x00FFFF)
  }.width('100%')
  .alignItems(HorizontalAlign.Start)
}.width('90%').height(100).border({ width: 1 })

ROW

Row() {
  Row().width('50%').height(50).backgroundColor(0xAFEEEE)
  Row().width('50%').height(50).backgroundColor(0x00FFFF)
}.width(321).height(52).border({ width: 1 })

Grid

gridData: String[] = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11']

Grid() {
  ForEach(this.gridData, (t: string) => {
    GridItem() {
      Text(t)
        .fontSize(16)
        .backgroundColor(0xF9CF93)
        .width('100%')
        .height('100%')
        .textAlign(TextAlign.Center)
    }
  })
}
.columnsTemplate('1fr 1fr 1fr 1fr 1fr')
.rowsTemplate('1fr 1fr 1fr')
.columnsGap(10)
.rowsGap(10)
.width('90%')
.backgroundColor(0xFAEEE0)
.height('100')

Counter

Counter() {
  Text(this.counterValue.toString())
}
.onInc(() => {
  this.counterValue++
})
.onDec(() => {
  this.counterValue--
})

List

List({ space: 20, initialIndex: 0 }) {
  ForEach(this.listArr, (item) => {
    ListItem() {
      Text('' + item)
        .width('100%')
        .height(18)
        .fontSize(16)
        .textAlign(TextAlign.Center)
        .borderRadius(10)
        .backgroundColor(0xFFFFFF)
    }.editable(true)
  }, item => item)
}
.listDirection(Axis.Vertical) // 排列方向
.divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线
.edgeEffect(EdgeEffect.None) // 滑动到边缘无效果
.chainAnimation(false) // 联动特效关闭
.onScrollIndex((firstIndex: number, lastIndex: number) => {
  console.info('first' + firstIndex)
  console.info('last' + lastIndex)
})
.editMode(false)
.height('150')

Stack

Stack({ alignContent: Alignment.Bottom }) {
  Text('First child, show in bottom').width('90%').height('100%').backgroundColor(0xd2cab3).align(Alignment.Top)
  Text('Second child, show in top').width('70%').height('60%').backgroundColor(0xc1cbac).align(Alignment.Top)
}.width('100%').height(150).margin({ top: 5 })

Swiper

Swiper(this.swiperController) {
  Text('1').width('90%').height(160).backgroundColor(0xAFEEEE).textAlign(TextAlign.Center).fontSize(20)
  Text('2').width('90%').height(160).backgroundColor(0xAFEEEE).textAlign(TextAlign.Center).fontSize(20)
  Text('3').width('90%').height(160).backgroundColor(0xAFEEEE).textAlign(TextAlign.Center).fontSize(20)
  Text('4').width('90%').height(160).backgroundColor(0xAFEEEE).textAlign(TextAlign.Center).fontSize(20)
  Text('5').width('90%').height(160).backgroundColor(0xAFEEEE).textAlign(TextAlign.Center).fontSize(20)
}
.index(1)
.autoPlay(true)
.interval(4000)
.indicator(true) // 默认开启指示点
.loop(false) // 默认开启循环播放
.duration(1000)
.vertical(false) // 默认横向切换
.itemSpace(0)
.onChange((index: number) => {
  console.info(index.toString())
})

Tabs

Tabs({ barPosition: BarPosition.End, index: 1, controller: this.controller }) {
  TabContent() {
    Column().width('100%').height('100%').backgroundColor(Color.Pink)
  }.tabBar('pink')

  TabContent() {
    Column().width('100%').height('100%').backgroundColor(Color.Yellow)
  }.tabBar('yellow')

  TabContent() {
    Column().width('100%').height('100%').backgroundColor(Color.Blue)
  }.tabBar('blue')

  TabContent() {
    Column().width('100%').height('100%').backgroundColor(Color.Green)
  }.tabBar('green')
}
.vertical(false).scrollable(true).barMode(BarMode.Fixed)
.barWidth(250).barHeight(50).animationDuration(400)
.onChange((index: number) => {
  console.info(index.toString())
})
.width('90%').backgroundColor(0xF5F5F5).height(150)

Badge

Badge({
  count: 8,
  maxCount: 99,
  style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red }
}) {
  Button('message')
    .onClick(() => {
    })
    .width(100).height(50).backgroundColor(0x317aff)
}.width(100).height(50)

Flex

Flex({ wrap: FlexWrap.Wrap  }) {
  Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
  Text('2').width('40%').height(50).backgroundColor(0xD2B48C)
  Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
  Text('4').width('50%').height(50).backgroundColor(0xD2B48C)
}
.height(100)
.width('90%')
.padding(10)
.backgroundColor(0xAFEEEE)