0
  • 聊天消息
  • 系統(tǒng)消息
  • 評論與回復
登錄后你可以
  • 下載海量資料
  • 學習在線課程
  • 觀看技術視頻
  • 寫文章/發(fā)帖/加入社區(qū)
會員中心
創(chuàng)作中心

完善資料讓更多小伙伴認識你,還能領取20積分哦,立即完善>

3天內不再提示

鴻蒙ArkTS聲明式組件:Blank

jf_46214456 ? 來源:jf_46214456 ? 作者:jf_46214456 ? 2024-06-19 16:21 ? 次閱讀

Blank

空白填充組件,在容器主軸方向上,空白填充組件具有自動填充容器空余部分的能力。僅當父組件為Row/Column/Flex時生效。

說明:
開發(fā)前請熟悉鴻蒙開發(fā)指導文檔 :[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
該組件從API Version 7開始支持。后續(xù)版本如有新增內容,則采用上角標單獨標記該內容的起始版本。

子組件

接口

Blank(min?: number | string)

從API version 10開始:

  • Blank在父容器Row、Column、Flex主軸方向上未設置大小時會自動拉伸、壓縮,設置了大小或容器自適應子節(jié)點大小時不會自動拉伸、壓縮。
  • Blank設置主軸方向大?。╯ize)與min時約束關系為max(min, size)。
  • Blank在父容器交叉軸上設置大小時不會撐滿父容器交叉軸,交叉軸不設置大小時alignSelf默認值為ItemAlign.Stretch,會撐滿容器交叉軸。

從API version 9開始,該接口支持在ArkTS卡片中使用。

參數

參數名參數類型必填參數描述
minnumberstring

屬性

除支持[通用屬性]外,還支持以下屬性:

名稱參數類型描述
color[ResourceColor]設置空白填充的填充顏色。 默認值:Color.Transparent 從API version 9開始,該接口支持在ArkTS卡片中使用。

事件

支持[通用事件]。

示例

示例1

Blank組件在橫豎屏占滿空余空間效果。

// xxx.ets
@Entry
@Component
struct BlankExample {
  build() {
    Column() {
      Row() {
        Text('Bluetooth').fontSize(18)
        Blank()
        Toggle({ type: ToggleType.Switch }).margin({ top: 14, bottom: 14, left: 6, right: 6 })
      }.width('100%').backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 })
    }.backgroundColor(0xEFEFEF).padding(20)
  }
}

豎屏狀態(tài)

zh-cn_image_0000001219662649

橫屏狀態(tài)

zh-cn_image_0000001174104388

示例2

Blank組件的父組件未設置寬度時,min參數的使用效果。

// xxx.ets
@Entry
@Component
struct BlankExample {
  build() {
    Column({ space: 20 }) {
      // blank父組件不設置寬度時,Blank失效,可以通過設置min最小寬度填充固定寬度
      Row() {
        Text('Bluetooth').fontSize(18)
        Blank().color(Color.Yellow)
        Toggle({ type: ToggleType.Switch }).margin({ top: 14, bottom: 14, left: 6, right: 6 })
      }.backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 })

      Row() {
        Text('Bluetooth').fontSize(18)
        // 設置最小寬度為160
        Blank('160').color(Color.Yellow)
        Toggle({ type: ToggleType.Switch }).margin({ top: 14, bottom: 14, left: 6, right: 6 })
      }.backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 })

    }.backgroundColor(0xEFEFEF).padding(20).width('100%')
  }
}

`HarmonyOSOpenHarmony鴻蒙文檔籽料:mau123789是v直接拿`

搜狗高速瀏覽器截圖20240326151450.png

Blank父組件未設置寬度時,子組件間無空白填充,使用min參數設置填充尺寸

blankmin

審核編輯 黃宇

聲明:本文內容及配圖由入駐作者撰寫或者入駐合作網站授權轉載。文章觀點僅代表作者本人,不代表電子發(fā)燒友網立場。文章及其配圖僅供工程師學習之用,如有內容侵權或者其他違規(guī)問題,請聯(lián)系本站處理。 舉報投訴
  • 組件
    +關注

    關注

    1

    文章

    503

    瀏覽量

    17784
  • 鴻蒙
    +關注

    關注

    57

    文章

    2302

    瀏覽量

    42689
收藏 人收藏

    評論

    相關推薦

    HarmonyOS/OpenHarmony應用開發(fā)-ArkTS聲明開發(fā)范式

    軌跡。狀態(tài)與數據管理狀態(tài)數據管理作為基于ArkTS聲明開發(fā)范式的特色,通過功能不同的裝飾器給開發(fā)者提供了清晰的頁面更新渲染流程和管道。狀態(tài)管理包括UI組件狀態(tài)和應用程序狀態(tài),兩者協(xié)
    發(fā)表于 01-17 15:09

    鴻蒙ArkTS聲明組件:Checkbox

    提供多選框組件,通常用于某選項的打開或關閉。
    的頭像 發(fā)表于 06-20 15:36 ?543次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:Checkbox

    鴻蒙ArkTS聲明組件:DataPanel

    數據面板組件,用于將多個數據占比情況使用占比圖進行展示。
    的頭像 發(fā)表于 06-21 09:42 ?341次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:DataPanel

    鴻蒙ArkTS聲明組件:Marquee

    跑馬燈組件,用于滾動展示一段單行文本。僅當文本內容寬度超過跑馬燈組件寬度時滾動,不超過時不滾動。
    的頭像 發(fā)表于 06-25 15:52 ?371次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:Marquee

    鴻蒙ArkTS聲明組件:NavDestination

    作為NavRouter組件的子組件,用于顯示導航內容區(qū)。
    的頭像 發(fā)表于 06-27 14:05 ?400次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:NavDestination

    鴻蒙ArkTS聲明組件:PatternLock

    圖案密碼鎖組件,以九宮格圖案的方式輸入密碼,用于密碼驗證場景。手指在PatternLock組件區(qū)域按下時開始進入輸入狀態(tài),手指離開屏幕時結束輸入狀態(tài)完成密碼輸入。
    的頭像 發(fā)表于 06-27 09:59 ?380次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:PatternLock

    鴻蒙ArkTS聲明組件:【RichText】

    富文本組件,解析并顯示HTML格式文本。
    的頭像 發(fā)表于 06-29 09:35 ?583次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:【RichText】

    鴻蒙ArkTS聲明組件:ScrollBar

    滾動條組件ScrollBar,用于配合可滾動組件使用,如List、Grid、Scroll。
    的頭像 發(fā)表于 07-01 15:52 ?455次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:ScrollBar

    鴻蒙ArkTS聲明組件:Span

    作為Text組件的子組件,用于顯示行內文本的組件。
    的頭像 發(fā)表于 07-01 09:14 ?394次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:Span

    鴻蒙ArkTS聲明組件:StepperItem

    用作[Stepper]組件的頁面子組件。
    的頭像 發(fā)表于 07-02 17:47 ?357次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:StepperItem

    鴻蒙ArkTS聲明組件:TextArea

    多行文本輸入框組件,當輸入的文本內容超過組件寬度時會自動換行顯示。
    的頭像 發(fā)表于 07-02 15:02 ?530次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:TextArea

    鴻蒙ArkTS聲明組件:TextInput

    單行文本輸入框組件。
    的頭像 發(fā)表于 07-03 09:14 ?749次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:TextInput

    鴻蒙ArkTS聲明組件:TextPicker

    滑動選擇文本內容的組件
    的頭像 發(fā)表于 07-03 15:07 ?338次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:TextPicker

    鴻蒙ArkTS聲明組件:TextTimer

    通過文本顯示計時信息并控制其計時器狀態(tài)的組件。
    的頭像 發(fā)表于 07-03 17:06 ?423次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:TextTimer

    鴻蒙ArkTS聲明組件:XComponent

    可用于EGL/OpenGLES和媒體數據寫入,并顯示在XComponent組件。
    的頭像 發(fā)表于 07-05 09:56 ?547次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:XComponent