一.基本介绍

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)