組件是構(gòu)建頁(yè)面的核心，每個(gè)組件通過(guò)對(duì)數(shù)據(jù)和方法的簡(jiǎn)單封裝，實(shí)現(xiàn)獨(dú)立的可視、可交互功能單元。組件之間相互獨(dú)立，隨取隨用，也可以在需求相同的地方重復(fù)使用。

一、文本組件

1.1.Text定義介紹

Text 是顯示文本的基礎(chǔ)組件之一，它可以包含子組件 Span ，當(dāng)包含 Span 時(shí)不生效，只顯示 Span 的內(nèi)容。接口如下：、

Text(content?: string | Resource)

說(shuō)明：

①.string格式，直接填寫文本內(nèi)容

Text（"圖片寬度"）

②.Resource格式，讀取本地資源文件

Text($r('app.string.width_label'))

需要注意的使由于國(guó)際化的問(wèn)題，讀取本地資源文件的時(shí)候，需要分別base/element、en_US和zh_CN下的setting.json進(jìn)行配置，先會(huì)根據(jù)語(yǔ)言在對(duì)應(yīng)的zh_CN或者en_CN下讀取，最后才會(huì)在base目錄下加載

1.2.Text屬性介紹

text除支持通用屬性外，還支持以下屬性參考網(wǎng)址 https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-basic-components-text-0000001477981201-V3，下面列出部分常用的屬性：

①.textAlign：設(shè)置文本的對(duì)其方式，對(duì)齊參考系是 Text 組件本身，只有 Text 組件本身的寬度大于文本內(nèi)容長(zhǎng)度， textAlign 屬性才起作用， TextAlign 定義了以下 3 種類型：

• Start（默認(rèn)值）：根據(jù)文字書寫相同的方向?qū)R，比如中文從左往右排版，那么文本則靠左對(duì)齊。
• Center：文本居中對(duì)齊。
• End：根據(jù)文字書寫相反的方向?qū)R，比如中文從左往右排版，那么文本則靠右對(duì)齊。

案例如下：

@Entry
@Component
struct TextPage {
  build() {
    Column({space:20}){
      //默認(rèn)Start:靠左對(duì)齊
      Text("HelloWorld")
        .backgroundColor("#FFC0CB")
        .width("100%")//默認(rèn)Start
        .fontSize("20fp")

      //文字居中
      Text("HelloWorld")
        .textAlign(TextAlign.Center)
        .backgroundColor("#6A5ACD")
        .width("100%")
        .fontSize("20fp")

      //文字靠右
      Text("HelloWorld")
        .textAlign(TextAlign.End)
        .backgroundColor("#3CB371")
        .width("100%")
        .fontSize("20fp")
    }
    .width("100%")
    .height("100%")
    .padding({top:20})
  }
}

執(zhí)行預(yù)覽效果如下：

②.maxLines、textOverflow：設(shè)置文本顯示的最大行數(shù)和截取方式，默認(rèn)折行顯示不截取，如果設(shè)置了此參數(shù)，則文本最多顯示到指定的行，如果有多余的文本，可以通過(guò) textOverflow 來(lái)指定截取方式，有兩種方式：

• Clip:超出maxLines展示行截?cái)鄡?nèi)容展示
• Ellipsis:超出maxLines展示行省略號(hào)

案例如下：

@Entry
@Component
struct TextMaxLinesPage {
  build() {
    Column(){
      //不設(shè)置不會(huì)截?cái)?/span>
      Text('This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content. This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content.')

      // 超出maxLines展示行截?cái)鄡?nèi)容展示
      Text('This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content. This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content.')
        .maxLines(1)
        .textOverflow({overflow: TextOverflow.Clip})
        .fontSize("20fp")
        .backgroundColor(Color.Pink)

      // 超出maxLines展示行省略號(hào)
      Text('This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content. This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content.')
        .maxLines(1)
        .textOverflow({overflow: TextOverflow.Ellipsis})
        .fontSize("20fp")
        .backgroundColor(Color.Green)
    }
    .width("100%")
    .height("100%")
    .padding({top:20})
  }
}

執(zhí)行后如下：

③.fontSize、fontColor、fontStyle、 fontWeight：分別表示設(shè)置文字的大小，顏色，樣式以及粗細(xì)，我們可以組合起來(lái)設(shè)置文本的富樣式，先看一個(gè)樣例：

Text('Hello, OpenHarmony')
        .fontSize("20fp")              //字體大小
        .fontColor('#ff0000')          //字體顏色
        .fontWeight(FontWeight.Bold)   //Bold加粗
        .fontStyle(FontStyle.Italic)   //字體樣式：Italic style是斜體風(fēng)格
        .decoration({type: TextDecorationType.LineThrough, color: Color.Black}) //decoration 表示給文本添加裝飾線,Underline是下劃線，LineThrough表示中劃線

執(zhí)行后如下：

1.3.案例練習(xí)

在屏幕輸入圖片寬度，讓圖片隨著輸入的寬度進(jìn)行改變，代碼如下：

@Entry
@Component
struct TextPage {
  //定義變量，控制圖片的寬度
  @State imageWidth:number = 20;

  build() {
    Column({space:20}){
      //加載圖片
      Image($r('app.media.icon'))
        .width(this.imageWidth)
        //圖像插值，High高使用率，Medium:中度使用，Low低使用率
        .interpolation(ImageInterpolation.High)

      //加載文字
      Text($r('app.string.width_new_label'))
        .fontSize("30fp")
        .fontWeight(FontWeight.Bold)

      //讓圖片的大小隨著text的值改變大小
      TextInput({'text': '100'})
        .width(150)
        .backgroundColor("#32CD32")
        .type(InputType.Number)
        .onChange((value:string)=>{
          this.imageWidth = parseInt(value)
        })
    }
    .width("100%")
    .padding(20)
  }
}

注意：

圖像插值是指在圖像處理中使用已知像素值來(lái)估計(jì)未知像素值的過(guò)程。高質(zhì)量的插值通常意味著使用更復(fù)雜的算法來(lái)估計(jì)像素值，以獲得更平滑、更真實(shí)的圖像結(jié)果。這種設(shè)置通常會(huì)增加計(jì)算成本，但可以提高圖像的視覺質(zhì)量。

上面的圖片由于放大，會(huì)出現(xiàn)鋸齒狀，采用圖像插值就可以解決這個(gè)問(wèn)題

執(zhí)行后如下：

二、按鈕組件

Button 組件也是基礎(chǔ)組件之一，和其它基礎(chǔ)組件不同的是 Button 組件允許添加一個(gè)子組件來(lái)實(shí)現(xiàn)不同的展示樣式。

2.1.Button定義

接口如下：

Button(label?: ResourceStr, options?: { type?: ButtonType, stateEffect?: boolean })

說(shuō)明：

①.文字型按鈕

Button('登錄'）

②.自定義按鈕，在Button內(nèi)嵌套其它組件

Button(){
        Image($r('app.media.search')).width(20).margin(10)
}

2.2.添加屬性和事件

Button("登錄")
        .width(100)
        .height(30)
        .type(ButtonType.Normal) //按鈕類型
        .onClick(()=>{
          //點(diǎn)擊事件
        })

type：設(shè)置 Button 按鈕的顯示樣式， ButtonType 定義了以下3種樣式：

①.Capsule（默認(rèn)值）：膠囊類型，圓角值默認(rèn)為 Button 高度的一半，并且不允許修改，此時(shí)通過(guò)設(shè)置 borderRadius() 的方式設(shè)置圓角則無(wú)效。案例如下：

@Entry
@Component
struct ButtoPage {
  build() {
    Column(){
      Button("test").height(30).width(100).backgroundColor("#C71585")

      //默認(rèn)值Capsule
      Button("test")
        .height(30)
        .width(100)
        .backgroundColor("#C71585") //背景色
        .borderRadius(20)           //設(shè)置圓角,但是沒有效果
        .borderWidth(3)             //設(shè)置邊框?qū)挾?/span>
        .borderColor(Color.Yellow)  //設(shè)置邊框顏色
    }
    .width("100%")
    .height("100%")
    .padding(20)
  }
}

執(zhí)行后如下：

②.Normal：矩形按鈕，無(wú)圓角，可以通過(guò) borderRadius() 設(shè)置圓角大小，不支持通過(guò) border() 的方式設(shè)置圓角

@Entry
@Component
struct ButtonPage02 {
  build() {
    Column(){
      //默認(rèn)膠囊類型
      Button("HelloWorld")
        .height(40)
        .width(120)
        .backgroundColor("#C71585")


      Button("HelloWorld")
        .height(40)
        .width(120)
        .backgroundColor("#C71585")
        .type(ButtonType.Normal) //按鈕為矩形
        .margin({top:30})

    }
    .width("100%")
    .height("100%")
    .padding(20)
  }
}

執(zhí)行后如下：

③.Circle：圓形按鈕，當(dāng)按鈕類型為Circle時(shí)，borderRadius即為按鈕半徑，若未設(shè)置borderRadius按鈕半徑則為寬、高中較小值的一半

@Entry
@Component
struct ButtonPage02 {
  build() {
    Column(){
      //默認(rèn)膠囊類型
      Button("HelloWorld")
        .height(40)
        .width(120)
        .backgroundColor("#C71585")


      Button("HelloWorld")
        .height(40)
        .width(120)
        .backgroundColor("#C71585")
        .type(ButtonType.Normal) //按鈕為矩形
        .margin({top:30})

      //按鈕設(shè)置為圓角，borderRadius(20)設(shè)置元素的邊框圓角半徑，不支持百分比。
      Button("Hi")
        .backgroundColor("#C71585")
        .type(ButtonType.Circle)
        .margin({top:30})
        .borderRadius(20)

      //若未設(shè)置borderRadius按鈕半徑則為寬、高中較小值的一半
      Button("Hi")
        .height(60)
        .width(120)
        .backgroundColor("#C71585")
        .type(ButtonType.Circle) //按鈕設(shè)置為圓角，沒有設(shè)置寬和高，則不會(huì)顯示
        .margin({top:30})

    }
    .width("100%")
    .padding(20)
  }
}

執(zhí)行后如下：

2.3.Button自定義樣式

①.包含 Text 組件

案例如下：

@Entry
@Component
struct ButtonPage02 {
  build() {
    Column(){
      
      //設(shè)置圓角矩形按鈕，文字通過(guò)Text實(shí)現(xiàn)
      Button(){
        Text("HelloWorld").fontSize(20).fontColor("#FFFFF0")
      }
      .height(40)
      .width(120)
      .backgroundColor("#C71585")
      .type(ButtonType.Normal) //設(shè)置為圓角矩形
      .borderRadius(8) //設(shè)置圓角半徑

      //設(shè)置圓形按鈕，文字通過(guò)Text實(shí)現(xiàn)
      Button(){
        Text("Hi").fontSize(20).fontColor("#FFFFF0")
      }
      .height(40)
      .width(120)
      .backgroundColor("#C71585")
      .margin(20)
      .type(ButtonType.Circle) //設(shè)置為圓角矩形
      .borderRadius(8) //設(shè)置圓角半徑
    }
    .width("100%")
    .padding(20)
  }
}

預(yù)覽如下：

上面給 Button 添加了一個(gè) Text 子組件，通過(guò)設(shè)置 Text 的文本樣式達(dá)到修改 Button 文字的效果。

②.包含Image組件

@Entry
@Component
struct ButtonPage02 {
  build() {
    Column(){

      //設(shè)置圓形按鈕,加載圖片按鈕
      Button(){
        Image($r('app.media.more'))
          .width(30)
          .height(30)
      }
      .height(40)
      .width(120)
      .backgroundColor("#D3D3D3")
      .margin(20)
      .type(ButtonType.Circle) //設(shè)置為圓角矩形
      .borderRadius(8) //設(shè)置圓角半徑

      //設(shè)置圓形按鈕,加載圖片按鈕
      Button(){
        Image($r('app.media.remove'))
          .width(30)
          .height(30)
      }
      .height(40)
      .width(120)
      .backgroundColor("#D3D3D3")
      .margin(20)
      .type(ButtonType.Circle) //設(shè)置為圓角矩形
      .borderRadius(8) //設(shè)置圓角半徑

    }
    .width("100%")
    .padding(20)
  }
}

預(yù)覽結(jié)果如下：

上面使用了 Image 組件，后續(xù)會(huì)詳細(xì)講解

③.包含復(fù)雜組件

@Entry
@Component
struct ButtonPage02 {
  build() {
    Column(){

      //設(shè)置圓形按鈕,加載圖片按鈕
      Button(){
        Image($r('app.media.more'))
          .width(30)
          .height(30)
      }
      .height(40)
      .width(120)
      .backgroundColor("#D3D3D3")
      .margin(20)
      .type(ButtonType.Circle) //設(shè)置為圓角矩形
      .borderRadius(8) //設(shè)置圓角半徑

      //設(shè)置圓形按鈕,加載圖片按鈕
      Button(){
        Image($r('app.media.remove'))
          .width(30)
          .height(30)
      }
      .height(40)
      .width(120)
      .backgroundColor("#D3D3D3")
      .margin(20)
      .type(ButtonType.Circle) //設(shè)置為圓角矩形
      .borderRadius(8) //設(shè)置圓角半徑

      //設(shè)置圓形按鈕,加載圖片按鈕和文字按鈕
      Button(){
        Row(){
          Image($r('app.media.loading'))
            .width(30)
            .height(30)
          Text("loading")
            .fontSize(20)
            .fontColor("#ffffff")
            .margin({left:12})
        }
      }
      .height(40)
      .width(140)
      .backgroundColor("#0099FF")
      .margin(20)
      .type(ButtonType.Normal) //設(shè)置為圓角矩形
      .borderRadius(8)

    }
    .width("100%")
    .padding(20)
  }
}

預(yù)覽結(jié)果如下圖所示：

上面使用 Row 作為子組件， Row 組件屬于線性容器組件，可以添加多個(gè)子組件，后續(xù)章節(jié)詳細(xì)會(huì)講解。

三、圖片組件

Image 用來(lái)加載并顯示圖片的基礎(chǔ)組件，它支持從內(nèi)存、本地和網(wǎng)絡(luò)加載圖片，支持png、jpg、bmp、svg和gif類型的圖片格式。當(dāng)從網(wǎng)絡(luò)加載圖片的時(shí)候，需要申請(qǐng)網(wǎng)絡(luò)訪問(wèn)權(quán)限。

3.1.Image定義

接口如下：

Image(src: string | PixelMap | Resource)

說(shuō)明如下：

①string格式，通常用來(lái)加載網(wǎng)絡(luò)圖片，需要申請(qǐng)網(wǎng)絡(luò)訪問(wèn)權(quán)限：ohos.permission.INTERNET

Image("https://xxx.png')

②Pixel Map格式，可以加載像素圖，常用在圖片編輯中

Image(pixel Map Object)

③Resource格式，加載本地圖片，推薦使用

Image($r('app.media.mate60'))
Image($rawfile('mate60.png'))

3.2.Image屬性

1）alt：設(shè)置占位圖，圖片顯示之前先顯示占位圖，比如在加載網(wǎng)絡(luò)圖片或者圖片加載失敗時(shí)的場(chǎng)景。

2）objectFit：設(shè)置圖片的放縮類型，當(dāng) Image 組件大小和圖片大小不同時(shí)指定圖片的放縮類型， ImageFit 提供了以下5種匹配模式：

• Cover（默認(rèn)值）：保持圖片寬高比進(jìn)行放縮顯示，使得圖片完全顯示在顯示邊界外。
• Contain：保持圖片寬高比進(jìn)行放縮顯示，使得圖片完全顯示在顯示邊界內(nèi)。
• Fill：不保持圖片寬高比顯示，是圖片完全充滿顯示邊界。
• None：保持圖片原有尺寸顯示，通常配合 objectRepeat 屬性一起使用。
• ScaleDown：保持圖片寬高比顯示，使圖片縮小或者保持不變的顯示出來(lái)。

3）renderMode：設(shè)置圖片的渲染模式， ImageRenderMode 定義了以下2種渲染模式：

• Original（默認(rèn)值）：按照原圖進(jìn)行渲染。
• Template：將圖像渲染為模板圖像，忽略圖片的顏色信息。

@Entry
@Component
struct ImagePage {
  build() {
    Column(){
      Image($r("app.media.Sns"))
        .width(200)
        .height(90)
        .renderMode(ImageRenderMode.Original) // 原圖渲染

      Image($r("app.media.Sns"))
        .width(200)
        .height(90)
        .renderMode(ImageRenderMode.Template) // 模板渲染
    }
    .width("100%")
    .height("100%")
    .padding(20)
  }
}

執(zhí)行如下：

4）sourceSize：設(shè)置圖片解碼尺寸，降低圖片的分辨率，常用于需要讓圖片顯示尺寸比組件尺寸更小的場(chǎng)景。和ImageFit.None配合使用時(shí)可在組件內(nèi)顯示小圖。單位：px

@Entry
@Component
struct ImagePage {
  build() {
    Column(){
      Image($r("app.media.Snip"))
        .width(200)
        .height(90)

      Image($r("app.media.Snip"))
        .width(200)
        .height(90)
        .margin({top:20})
        .sourceSize({width:10,height:10}) //設(shè)置解碼的寬度
    }
    .width("100%")
    .height("100%")
    .padding(20)
  }
}

預(yù)覽效果如下：

3.3.Image加載方式

1）從本地加載

• 拷貝 Snip.png 圖片到工程的 resources/main/base/media 目錄下
• 加載圖片，直接使用系統(tǒng)提供的資源訪問(wèn)符 $() 或者本地文件加載
• 加載圖片，從本地的rawfile中加載圖片通過(guò)$rawfile(“scenery.png”)方式加載

案例如下：

@Entry
@Component
struct ImagePage03 {
  @State message:string = '點(diǎn)我呀';
  build() {
    Column(){
      Text(this.message)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .fontColor("#36D")
        .onClick(()=>{
          this.message = "HelloWorld!" //點(diǎn)擊替換文字
        })

      //加載本地media下的圖片
      Image($r('app.media.icon'))
        .width(200)
        .height(200)
        .margin({top:20})
        .interpolation(ImageInterpolation.High) //設(shè)置圖片的插值效果，即減輕低清晰度圖片在放大顯示的時(shí)候出現(xiàn)的鋸齒問(wèn)題，僅針對(duì)圖片放大插值。

      //從本地的rawfile中加載圖片
      Image($rawfile("scenery.png"))
        .width(300)
        .height(200)
        .margin({top:20})
    }
    .width("100%")
    .height("100%")
    .padding(20)
    .alignItems(HorizontalAlign.Center)
  }
}

ImageInterpolation：圖片插值：從API version 9開始，該接口支持在ArkTS卡片中使用。

執(zhí)行后如下：

2）從網(wǎng)絡(luò)加載

• 限制與約束說(shuō)明：

當(dāng)加載網(wǎng)絡(luò)圖片時(shí)需要申請(qǐng) ohos.permission.INTERNET 權(quán)限。具體申請(qǐng)方式請(qǐng)參考權(quán)限申請(qǐng)聲明。

應(yīng)用需要在工程配置文件中，對(duì)需要的權(quán)限逐個(gè)聲明，未在配置文件中聲明的權(quán)限，應(yīng)用將無(wú)法獲得授權(quán)。HarmonyOS提供了兩種應(yīng)用模型，分別為FA模型和Stage模型，更多信息可以參考應(yīng)用模型解讀。不同的應(yīng)用模型的應(yīng)用包結(jié)構(gòu)不同，所使用的配置文件不同。

配置文件標(biāo)簽說(shuō)明如下表所示。

Stage模型

使用Stage模型的應(yīng)用，需要在module.json5配置文件中聲明權(quán)限。添加這一段即可

"requestPermissions": [
      {"name":  "ohos.permission.INTERNET"}
    ],

如下圖所示

• 案例演示

@Entry
@Component
struct ImagePage04 {
  @State message:string = '點(diǎn)我呀';

  build() {
    Column(){
      //加載網(wǎng)絡(luò)圖片
      Image('https://imgservice.suning.cn/uimg1/b2c/image/XyeIzII8UlaDgw0xp0YIpA.png_800w_800h_4e')
    }
    .width("100%")
    .height("100%")
    .padding(20)
  }
}

執(zhí)行后如下：

3）從內(nèi)存加載

Image(pixel Map object)

四、輸入框組件

ArkUI開發(fā)框架提供了 2 種類型的輸入框：

• TextInput：只支持單行輸入
• TextArea：支持多行輸入

下面我們分別做下介紹

4.1.TextInput定義

接口如下：

TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextInputController})

value：輸入框的提示樣式設(shè)置， TextInputOptions 參數(shù)類型說(shuō)明如下：

• text：設(shè)置輸入框的初始顯示文本，不設(shè)置時(shí)顯示 placeholder 的內(nèi)容。
• placeholder：占位提示文本，當(dāng)不設(shè)置 text 時(shí)，則會(huì)顯示該文本。
• controller：光標(biāo)控制器，設(shè)置光標(biāo)的下標(biāo)位置。

案例如下：

@Entry
@Component
struct TextInputPage01 {
  build() {
    Column(){
      TextInput({
        placeholder: "hi, Augus"
      }).margin({top:20})
        .width(200)

      TextInput({
        placeholder: "Augus",
        text: "請(qǐng)輸入用戶名"
      }).margin({top:20})
        .width(200)

    }.width("100%")
  }
}

執(zhí)行后效果如下：

4.2.TextInput屬性介紹

TextInput 組件用于文本輸入，它只能單行文本輸入，若文本超出自身長(zhǎng)度則使用 ... 在末尾替代。 TextInput 組件除了公共屬性外，它還提供了很多常用的屬性：

• type：表示輸入框的類型，比如設(shè)置為 Number ，則表示輸入框只能輸入數(shù)字, password表示輸入的密碼，會(huì)使用遮擋符遮擋。
• enterKeyType：表示設(shè)置輸入法回車鍵類型，主要用來(lái)控制回車鍵的顯示樣式。例如設(shè)置 enterKeyType 為 Search ， type 為 Number 時(shí)，結(jié)果如下圖所示：

• maxLength：設(shè)置輸入框允許輸入多少字符。
• caretColor：設(shè)置光標(biāo)的顏色。

案例如下：

@Entry
@Component
struct TextInputPage01 {
  build() {
    Column(){

      TextInput({
        text: "請(qǐng)輸入年齡"
      })
        .margin({top:20})
        .width(200)
        .type(InputType.Number)                //設(shè)置類型
        .caretColor(Color.Red)                 //設(shè)置光標(biāo)顏色
        //.enterKeyType(EnterKeyType.Search)     //例如 這個(gè)是搜索框

    }.width("100%")
  }
}

結(jié)果如下：

4.3.TextInput事件介紹

TextInput 除了具有公共事件外，它還提供了自己獨(dú)有的事件回調(diào)。

• onChange：當(dāng)輸入框的內(nèi)容變化時(shí)，觸發(fā)該回調(diào)并把輸入框的值回調(diào)出來(lái)
• onSubmit：回車鍵或者軟鍵盤回車鍵觸發(fā)該回調(diào)，參數(shù)為當(dāng)前軟鍵盤回車鍵類型。
• onEditChanged：輸入狀態(tài)變化時(shí)，觸發(fā)回調(diào)。

TextInput 的一個(gè)案例如下：

@Entry
@Component
struct TextInputPage02 {
  @State value:string = "";

  build() {
    Column(){
      TextInput({placeholder: "請(qǐng)輸入密碼"})
        .width("100%")                     //設(shè)置輸入框?qū)挾葹?00%
        .height(45)                        //設(shè)置輸入框高度為45
        .type(InputType.Password)          //設(shè)置輸入框類型為密碼輸入
        .enterKeyType(EnterKeyType.Done)   //設(shè)置按下回車鍵的行為，表示完成輸入
        .caretColor(Color.Red)             //設(shè)置光標(biāo)顏色為紅色
        .placeholderColor(Color.Orange)     //設(shè)置占位符文本顏色為綠色
        .placeholderFont({
          size:20,                         // 字體大小為20
          style:FontStyle.Italic,          // 字體樣式為斜體
          weight:FontWeight.Bold           // 字體粗細(xì)為粗體
        })
        .onChange((value)=>{
          this.value = value;
        })

      Text("輸入內(nèi)容為："+this.value)
        .fontSize(20)
        .width("100%")
        .margin({top:20})
    }
    .width("100%")
    .height("100%")
    .padding(20)
    .alignItems(HorizontalAlign.Center) //表示將子元素在水平方向上的對(duì)齊方式設(shè)置為居中對(duì)齊。這意味著子元素將在其父容器的水平中心位置進(jìn)行對(duì)齊。
  }
}

預(yù)覽效果如下：

4.4.TextArea簡(jiǎn)單介紹

TextArea 和 TextInput 都屬于輸入框，只是 TextArea 允許多行輸入，它們的屬性也都大致是一樣的，只是目前 TextArea 還不支持 maxLength 屬性，這里就不再介紹 TextArea 的屬性了

案例說(shuō)明 TextInput 和 TextArea 的使用，如下所示：

@Entry
@Component
struct TextInputPage02 {
  @State value:string = "";

  build() {
    Column(){
      Row(){
        Text("聯(lián)系方式：").fontSize(20)

        TextInput({placeholder:"QQ或者郵箱"})
          .layoutWeight(1)
          .height(45)
          .type(InputType.Normal)
          .fontColor(Color.Blue)
          .enterKeyType(EnterKeyType.Next)
          .caretColor(Color.Black)
          .placeholderFont({
            size: 18,
            style: FontStyle.Italic,
            weight: FontWeight.Bold
          })
      }
      .width("100%")
      .height(60)

      Row(){

        Text("反饋意見：").fontSize(20)

        Stack({alignContent:Alignment.BottomEnd}){
          TextArea({placeholder:"請(qǐng)輸入反饋意見內(nèi)容"})
            .width("100%")
            .height(500)
            .fontColor(Color.Green)
            .fontStyle(FontStyle.Italic)
            .caretColor(Color.Red)
            .placeholderColor(Color.Black)
            .placeholderFont({
              size: 18,
              style: FontStyle.Italic,
              weight: FontWeight.Bold
            })
            .onChange((value) => {
              this.value = value;
            })

          Text(this.value.length + "/1000")
            .fontSize(15)
            .margin(10)
        }
        .layoutWeight(1)
        .width("100%")
        .height(300)
      }
    }
    .width("100%")
    .height("100%")
    .padding(20)
    .alignItems(HorizontalAlign.Center) //表示將子元素在水平方向上的對(duì)齊方式設(shè)置為居中對(duì)齊。這意味著子元素將在其父容器的水平中心位置進(jìn)行對(duì)齊。
  }
}

運(yùn)行結(jié)果如下圖所示：

@Entry  // 標(biāo)記為入口組件
@Component  // 聲明為組件
struct TextInputPage02 {
  @State value:string = "";  // 聲明一個(gè)狀態(tài)變量 value，初始值為空字符串

  build() {  // 組件的構(gòu)建方法
    Column(){  // 創(chuàng)建一個(gè)垂直布局的列
      Row(){  // 在列中創(chuàng)建一行
        Text("聯(lián)系方式：").fontSize(20)  // 顯示文本“聯(lián)系方式：”，設(shè)置字體大小為20

        TextInput({placeholder:"QQ或者郵箱"})  // 創(chuàng)建一個(gè)文本輸入框，設(shè)置占位符為"QQ或者郵箱"
          .layoutWeight(1)  // 設(shè)置布局權(quán)重為1，占據(jù)剩余空間
          .height(45)  // 設(shè)置輸入框高度為45
          .type(InputType.Normal)  // 設(shè)置輸入框類型為普通文本輸入
          .fontColor(Color.Blue)  // 設(shè)置文本顏色為藍(lán)色
          .enterKeyType(EnterKeyType.Next)  // 設(shè)置按下回車鍵的行為為切換到下一個(gè)輸入框
          .caretColor(Color.Black)  // 設(shè)置光標(biāo)顏色為黑色
          .placeholderFont({  // 設(shè)置占位符文本字體樣式
            size: 18,  // 字體大小為18
            style: FontStyle.Italic,  // 字體樣式為斜體
            weight: FontWeight.Bold  // 字體粗細(xì)為粗體
          })
      }
      .width("100%")  // 設(shè)置行的寬度為100%
      .height(60)  // 設(shè)置行的高度為60

      Row(){  // 在列中創(chuàng)建另一行

        Text("反饋意見：").fontSize(20)  // 顯示文本“反饋意見：”，設(shè)置字體大小為20

        Stack({alignContent:Alignment.BottomEnd}){  // 創(chuàng)建一個(gè)堆疊布局，并設(shè)置子元素在底部右側(cè)對(duì)齊
          TextArea({placeholder:"請(qǐng)輸入反饋意見內(nèi)容"})  // 創(chuàng)建一個(gè)文本域，設(shè)置占位符為"請(qǐng)輸入反饋意見內(nèi)容"
            .width("100%")  // 設(shè)置文本域?qū)挾葹?00%
            .height(500)  // 設(shè)置文本域高度為500
            .fontColor(Color.Green)  // 設(shè)置文本顏色為綠色
            .fontStyle(FontStyle.Italic)  // 設(shè)置字體樣式為斜體
            .caretColor(Color.Red)  // 設(shè)置光標(biāo)顏色為紅色
            .placeholderColor(Color.Black)  // 設(shè)置占位符文本顏色為黑色
            .placeholderFont({  // 設(shè)置占位符文本字體樣式
              size: 18,  // 字體大小為18
              style: FontStyle.Italic,  // 字體樣式為斜體
              weight: FontWeight.Bold  // 字體粗細(xì)為粗體
            })
            .onChange((value) => {  // 監(jiān)聽文本域內(nèi)容變化事件
              this.value = value;  // 將文本域的值賦給狀態(tài)變量 value
            })

          Text(this.value.length + "/1000")  // 顯示當(dāng)前文本域內(nèi)容長(zhǎng)度和最大長(zhǎng)度的提示
            .fontSize(15)  // 設(shè)置字體大小為15
            .margin(10)  // 設(shè)置外邊距為10
        }
        .layoutWeight(1)  // 設(shè)置布局權(quán)重為1，占據(jù)剩余空間
        .width("100%")  // 設(shè)置堆疊布局寬度為100%
        .height(300)  // 設(shè)置堆疊布局高度為300
      }
    }
    .width("100%")  // 設(shè)置列寬度為100%
    .height("100%")  // 設(shè)置列高度為100%
    .padding(20)  // 設(shè)置內(nèi)邊距為20
    .alignItems(HorizontalAlign.Center)  // 設(shè)置子元素在水平方向上的對(duì)齊方式為居中對(duì)齊
  }
}

預(yù)覽效果如下：

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-824171.html

到了這里，關(guān)于【HarmonyOS4.0】第六篇-ArkUI系統(tǒng)組件(一)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！