一.基本介绍
1.组件
ArkUI(方舟开发框架)是一套 构建 鸿蒙应用 界面 的框架。 构建页面的最小单位就是 "组件"。
- 容器组件:Column、Row
- 基础组件:Text
容器组件() { // 内容
}
基础组件(参数)
@Entry
@Component
struct Index {
@State message: string = '';
build() {
Column(){
Text("容器")
}
}
}
2.属性
属性方法怎么写?
组件() {} .属性方法1(参数) .属性方法2(参数) .属性方法3(参数) ......
image.png
二.文字组件
Text("设备介绍")
.fontColor("#8fbce7")
.fontSize(20)
.textOverflow({ overflow: TextOverflow.Ellipsis })//需要配合maxLines使用
.maxLines(2)
.width(10)
.lineHeight(30)
三.图片组件
- Image(图片数据源) 支持 网络图片资源 和 本地图片资源
- 图片位置：main/resources/base/media/xx.png
Image('https://www.itheima.com/images/logo.png').width(100)
Image($r("app.media.app_icon_big")).width(50)
四.输入框组件
- InputType.Normal：基本输入模式，无特殊限制
- InputType.Password：密码输入模式
TextInput({ placeholder: "请输入文本" })
.type(InputType.Normal)
五.按钮组件
Button("登录")
六.Swiper 轮播组件
image.png
Swiper() {
Image($r("app.media.layered_image"))
Image($r("app.media.icon_tip"))
Image($r("app.media.ic_back"))
Image($r("app.media.foreground"))
}
.width("100%")
.height(200)
.indicator(
Indicator.dot()// 小圆点
.itemWidth(20)// 默认的宽
.itemHeight(20)// 默认的高
.color(Color.Black)// 默认的颜色
.selectedItemWidth(30)// 选中的宽
.selectedItemHeight(30)// 选中的高
.selectedColor(Color.White) // 选中的颜色
)
.autoPlay(true)
.loop(true)
.interval(3000)
.vertical(false)
