网站建设怎么下载代码,平台引流推广怎么做,wordpress上传工具,免费注册网站的平台书接上回#xff0c;让我们继续来学习ArkUI的其他组件 目录#xff0c;可以点击跳转到想要了解的组件详细内容 组件四#xff1a;Button组件五#xff1a;Slider组件六#xff1a; Column Row组件七#xff1a;循环控制组件八#xff1a; List 组件四#xff1a;… 书接上回让我们继续来学习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: ArrayItem [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组件不仅可以设置主轴的方向还可以设置交叉轴的布局方式、添加分割线、滚动条等这些效果通过以下属性来实现
