书接上回，让我们继续来学习ArkUI的其他组件
目录，可以点击跳转到想要了解的组件详细内容
- 组件四：Button
- 组件五：Slider
- 组件六： Column & Row
- 组件七：循环控制
- 组件八： List
组件四：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组件不仅可以设置主轴的方向，还可以设置交叉轴的布局方式、添加分割线、滚动条等，这些效果通过以下属性来实现
