一.基本介紹

1.組件

ArkUI(方舟開(kāi)發(fā)框架)是一套 構(gòu)建 鴻蒙應(yīng)用 界面 的框架。 構(gòu)建頁(yè)面的最小單位就是 "組件"。

• 容器組件:Column、Row
• 基礎(chǔ)組件:Text

容器組件() { // 內(nèi)容
}

基礎(chǔ)組件(參數(shù))

@Entry
@Component
struct Index {
  @State message: string = '';
  build() {
    Column(){
      Text("容器")
    }
  }
}

2.屬性

屬性方法怎么寫(xiě)?

組件() {} .屬性方法1(參數(shù)) .屬性方法2(參數(shù)) .屬性方法3(參數(shù)) ......

image.png

二.文字組件

  Text("設(shè)備介紹")
        .fontColor("#8fbce7")
        .fontSize(20)
        .textOverflow({ overflow: TextOverflow.Ellipsis })//需要配合maxLines使用
        .maxLines(2)
        .width(10)
        .lineHeight(30)

三.圖片組件

• Image(圖片數(shù)據(jù)源) 支持 網(wǎng)絡(luò)圖片資源 和 本地圖片資源
• 圖片位置：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：基本輸入模式，無(wú)特殊限制
• InputType.Password：密碼輸入模式

  TextInput({ placeholder: "請(qǐng)輸入文本" })
        .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()// 小圓點(diǎn)
          .itemWidth(20)// 默認(rèn)的寬
          .itemHeight(20)// 默認(rèn)的高
          .color(Color.Black)// 默認(rèn)的顏色
          .selectedItemWidth(30)// 選中的寬
          .selectedItemHeight(30)// 選中的高
          .selectedColor(Color.White) // 選中的顏色
      )
      .autoPlay(true)
      .loop(true)
      .interval(3000)
      .vertical(false)