HarmonyOS鸿蒙开发入门，常用ArkUI组件学习（二）

书接上回，让我们继续来学习ArkUI的其他组件

组件四：Button

Button有三种类型提供给我们使用，如下：

Capsule：胶囊型按钮，默认样式；此类型按钮的圆角自动设置为高度的一半，不支持通过borderRadius属性重新设置圆角。

Circle：圆形按钮，不支持通过borderRadius属性重新设置圆角。

Normal：普通按钮（默认不带圆角），此类型的按钮默认圆角为0，支持通过borderRadius属性重新设置圆角。

组件五：Slider

Slider组件为滑动条，可快速调节设置值，如音量、亮度调节等
接口为：

Slider(options?: {value?: number, min?: number, max?: number, step?: number, style?: SliderStyle, direction?: Axis, reverse?: boolean})

注：OutSet：滑块在滑轨上
InSet：滑块在滑轨内

组件六： Column & Row

1 线性布局介绍

2 自适应拉伸

3 自适应缩放

4 定位方式

这个我会抽空单独出一篇博客，这里列个大纲，敬请期待

组件七：循环控制

在ArkTS开发中，我们使用ForEach / if-else 来控制页面的循环布局。

class Item {
  name: string
  image: ResourceStr
  price: number
 
  constructor(name: string, image: ResourceStr, price: number){
    this.name = name
    this.image = image
    this.price = price
  }
}
@Entry
@Component
struct Index {
  private items: Array<Item> = [
    new Item('os1',$r('app.media.hongmeng'),2000),
    new Item('os2',$r('app.media.hongmeng'),3000),
    new Item('os3',$r('app.media.hongmeng'),4000),
    new Item('os4',$r('app.media.hongmeng'),5000),
    new Item('os5',$r('app.media.hongmeng'),6000)
  ]
  build() {
    Column({space:8}){
      Row(){
        Text('商品列表')
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
      .margin({bottom: 20})
 
      // 循环控制
      ForEach(
        this.items,
        item=>{
          Row({space:10}){
            Image(item.image)
              .width(100)
            Column({space: 4}){
              Text(item.name)
                .fontSize(20)
                .fontWeight(FontWeight.Bold)
              Text('¥' + item.price)
                .fontSize(18)
                .fontColor('#ff0000')
            }
            .height('100%')
            .alignItems(HorizontalAlign.Start)
          }
          .width('100%')
          .backgroundColor('#fff')
          .borderRadius(20)
          .height(120)
          .padding(10)
        }
      )
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#efefef')
    .padding(20)
  }
}

还可以使用if-else

if(判断条件){

 //内容

}else{

//内容

}

通过判断条件决定使用哪种方式渲染

组件八： List

List组件不仅可以设置主轴的方向，还可以设置交叉轴的布局方式、添加分割线、滚动条等，这些效果通过以下属性来实现