书接上回,让我们继续来学习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: stringimage: ResourceStrprice: numberconstructor(name: string, image: ResourceStr, price: number){this.name = namethis.image = imagethis.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组件不仅可以设置主轴的方向,还可以设置交叉轴的布局方式、添加分割线、滚动条等,这些效果通过以下属性来实现