色哟哟视频在线观看-色哟哟视频在线-色哟哟欧美15最新在线-色哟哟免费在线观看-国产l精品国产亚洲区在线观看-国产l精品国产亚洲区久久

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

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

3天內不再提示

鴻蒙ArkTS容器組件:GridCol

jf_46214456 ? 來源:jf_46214456 ? 作者:jf_46214456 ? 2024-07-08 15:17 ? 次閱讀

GridCol

柵格子組件,必須作為柵格容器組件([GridRow])的子組件使用。

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

子組件

可以包含單個子組件。

接口

GridCol(option?:{span?: number | GridColColumnOption, offset?: number | GridColColumnOption, order?: number | GridColColumnOption})

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

參數

參數名類型必填說明
spannumber[GridColColumnOption]
offsetnumber[GridColColumnOption]
ordernumber[GridColColumnOption]

說明:

spanoffsetorder屬性按照xssmmdlgxlxxl的順序具有“繼承性”,未設置值的斷點將會從前一個斷點取值。

在不同寬度設備類型上的默認值為:

參數斷點xssmmdlgxlxxl
span223344
offset223555
order202020333

屬性

參數名類型必填說明
spannumberGridColColumnOption
gridColOffsetnumberGridColColumnOption
ordernumberGridColColumnOption

GridColColumnOption

用于自定義指定在不同寬度設備類型上,柵格子組件占據的柵格數量單位。

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

參數名參數類型必填參數描述
xsnumber在最小寬度類型設備上,柵格子組件占據的柵格數量單位。
smnumber在小寬度類型設備上,柵格子組件占據的柵格數量單位。
mdnumber在中等寬度類型設備上,柵格子組件占據的柵格數量單位。
lgnumber在大寬度類型設備上,柵格子組件占據的柵格數量單位。
xlnumber在特大寬度類型設備上,柵格子組件占據的柵格數量單位。
xxlnumber在超大寬度類型設備上,柵格子組件占據的柵格數量單位。

示例

GridRow

柵格布局可以為布局提供規律性的結構,解決多尺寸多設備的動態布局問題,保證不同設備上各個模塊的布局一致性。

柵格容器組件,僅可以和柵格子組件([GridCol])在柵格布局場景中使用。

說明:

該組件從API Version 9開始支持。后續版本如有新增內容,則采用上角標單獨標記該內容的起始版本。

子組件

可以包含GridCol子組件。

接口

GridRow(option?: {columns?: number | GridRowColumnOption, gutter?: Length | GutterOption, breakpoints?: BreakPoints, direction?: GridRowDirection})

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

參數:

參數名類型必填說明
gutterLengthGutterOption
columnsnumberGridRowColumnOption
eakpointsBreakPoints設置斷點值的斷點數列以及基于窗口或容器尺寸的相應參照。
directionGridRowDirection柵格布局排列方向。

GutterOption

柵格布局間距類型,用于描述柵格子組件不同方向的間距。

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

參數名參數類型必填參數描述
xLengthGridRowSizeOption
yLengthGridRowSizeOption

GridRowColumnOption

柵格在不同寬度設備類型下,柵格列數。

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

參數名參數類型必填參數描述
xsnumber在最小寬度類型設備上,柵格容器組件的柵格列數。
smnumber在小寬度類型設備上,柵格容器組件的柵格列數。
mdnumber在中等寬度類型設備上,柵格容器組件的柵格列數。
lgnumber在大寬度類型設備上,柵格容器組件的柵格列數。
xlnumber在特大寬度類型設備上,柵格容器組件的柵格列數。
xxlnumber在超大寬度類型設備上,柵格容器組件的柵格列數。

GridRowSizeOption

柵格在不同寬度設備類型下,gutter的大小。

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

參數名參數類型必填參數描述
xsLength在最小寬度類型設備上,柵格子組件的間距。
smLength在小寬度類型設備上,柵格子組件的間距。
mdLength在中等寬度類型設備上,柵格子組件的間距。
lgLength在大寬度類型設備上,柵格子組件的間距。
xlLength在特大寬度類型設備上,柵格子組件的間距。
xxlLength在超大寬度類型設備上,柵格子組件的間距。

BreakPoints

設置柵格容器組件的斷點。

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

參數名參數類型必填參數描述
valueArray設置斷點位置的單調遞增數組。 默認值:["320vp", "600vp", "840vp"]
referenceBreakpointsReference斷點切換參照物。 默認值:BreakpointsReference.WindowSize
// 啟用xs、sm、md共3個斷點
  breakpoints: {value: ["100vp", "200vp"]}
  // 啟用xs、sm、md、lg共4個斷點,斷點范圍值必須單調遞增
  breakpoints: {value: ["320vp", "600vp", "840vp"]}
  // 啟用xs、sm、md、lg、xl共5個斷點,斷點范圍數量不可超過斷點可取值數量-1
  breakpoints: {value: ["320vp", "600vp", "840vp", "1080vp"]}

BreakpointsReference枚舉類型

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

枚舉名描述
WindowSize以窗口為參照。
ComponentSize以容器為參照。

GridRowDirection枚舉類型

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

枚舉名描述
Row柵格元素按照行方向排列。
RowReverse柵格元素按照逆序行方向排列。

柵格最多支持xs、sm、md、lg、xl、xxl六個斷點,且名稱不可修改。假設傳入的數組是[n0, n1, n2, n3, n4],各個斷點取值如下:

斷點取值范圍
xs[0, n0)
sm[n0, n1)
md[n1, n2)
lg[n2, n3)
xl[n3, n4)
xxl[n4, INF)

說明:

  • 柵格元素僅支持Row/RowReverse排列,不支持column/ColumnReverse方向排列。
  • 柵格子組件僅能通過span、offset計算子組件位置與大小。多個子組件span超過規定列數時自動換行。
  • 單個元素span大小超過最大列數時后臺默認span為最大column數。
  • 新一行的Offset加上子組件的span超過總列數時,將下一個子組件在新的一行放置。
  • 例:Item1: GridCol({ span: 6}), Item2: GridCol({ span: 8, offset:11})
123456789101112
°°°°°°°°°°°°------
-----
°°°°°°°°°°°°°°°°

屬性

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

名稱參數類型描述
alignItems10+ItemAlign設置GridRow中的GridCol垂直主軸方向對齊方式,默認值:ItemAlign.Start 說明 : ItemAlign支持的枚舉:ItemAlign.Start、ItemAlign.Center、ItemAlign.End、ItemAlign.Stretch。 GridCol本身也可通過alignSelf([ItemAlign])設置自身對齊方式。當上述兩種對齊方式都設置時,以GridCol自身設置為準。 從API version 10開始,該接口支持在ArkTS卡片中使用。

事件

onBreakpointChange

onBreakpointChange(callback: (breakpoints: string) => void)

斷點發生變化時觸發回調。

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

參數:

參數名參數類型必填說明
eakpointsstring取值為"xs""sm""md""lg""xl""xxl"HarmonyOSOpenHarmony鴻蒙文檔籽料:mau123789是v直接拿

鴻蒙文檔.png

示例

// xxx.ets
@Entry
@Component
struct GridRowExample {
  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]
  @State currentBp: string = 'unknown'

  build() {
    Column() {
      GridRow({
        columns: 5,
        gutter: { x: 5, y: 10 },
        breakpoints: { value: ["400vp", "600vp", "800vp"],
          reference: BreakpointsReference.WindowSize },
        direction: GridRowDirection.Row
      }) {
        ForEach(this.bgColors, (color: Color) = > {
          GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 }, offset: 0, order: 0 }) {
            Row().width("100%").height("20vp")
          }.borderColor(color).borderWidth(2)
        })
      }.width("100%").height("100%")
      .onBreakpointChange((breakpoint) = > {
        this.currentBp = breakpoint
      })
    }.width('80%').margin({ left: 10, top: 5, bottom: 5 }).height(200)
    .border({ color: '#880606', width: 2 })
  }
}

figures/gridrow.png

審核編輯 黃宇

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

    關注

    1

    文章

    512

    瀏覽量

    17813
  • 鴻蒙
    +關注

    關注

    57

    文章

    2339

    瀏覽量

    42816
收藏 人收藏

    評論

    相關推薦

    鴻蒙ArkTS容器組件:Column

    沿垂直方向布局的容器
    的頭像 發表于 07-05 16:32 ?434次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>容器</b><b class='flag-5'>組件</b>:Column

    鴻蒙ArkTS容器組件:Flex

    以彈性方式布局子組件容器組件
    的頭像 發表于 07-08 10:19 ?488次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>容器</b><b class='flag-5'>組件</b>:Flex

    鴻蒙ArkTS容器組件:FlowItem

    [瀑布流組件]的子組件,用來展示瀑布流具體item。
    的頭像 發表于 07-08 09:56 ?357次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>容器</b><b class='flag-5'>組件</b>:FlowItem

    鴻蒙ArkTS容器組件:GridItem

    網格容器中單項內容容器
    的頭像 發表于 07-09 09:25 ?388次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>容器</b><b class='flag-5'>組件</b>:GridItem

    鴻蒙ArkTS容器組件:ListItem

    可以包含單個子組件
    的頭像 發表于 07-10 15:41 ?627次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>容器</b><b class='flag-5'>組件</b>:ListItem

    鴻蒙ArkTS容器組件:ListItemGroup

    組件用來展示列表item分組,寬度默認充滿[List]組件,必須配合List組件來使用。
    的頭像 發表于 07-10 09:20 ?669次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>容器</b><b class='flag-5'>組件</b>:ListItemGroup

    鴻蒙ArkTS容器組件:Navigator

    路由容器組件,提供路由跳轉能力。
    的頭像 發表于 07-10 14:55 ?403次閱讀

    鴻蒙ArkTS容器組件:Refresh

    可以進行頁面下拉操作并顯示刷新動效的容器組件
    的頭像 發表于 07-11 16:11 ?501次閱讀

    鴻蒙ArkTS容器組件:RowSplit

    將子組件橫向布局,并在每個子組件之間插入一根縱向的分割線。
    的頭像 發表于 07-11 22:25 ?336次閱讀

    鴻蒙ArkTS容器組件:Scroll

    可滾動的容器組件,當子組件的布局尺寸超過父組件的尺寸時,內容可以滾動。
    的頭像 發表于 07-12 15:24 ?1223次閱讀

    鴻蒙ArkTS容器組件:SideBarContainer

    提供側邊欄可以顯示和隱藏的側邊欄容器,通過子組件定義側邊欄和內容區,第一個子組件表示側邊欄,第二個子組件表示內容區。
    的頭像 發表于 07-18 15:46 ?541次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>容器</b><b class='flag-5'>組件</b>:SideBarContainer

    鴻蒙ArkTS容器組件:Stack

    堆疊容器,子組件按照順序依次入棧,后一個子組件覆蓋前一個子組件
    的頭像 發表于 07-15 18:23 ?864次閱讀

    鴻蒙ArkTS容器組件:Swiper

    滑塊視圖容器,提供子組件滑動輪播顯示的能力。
    的頭像 發表于 07-15 09:51 ?615次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>容器</b><b class='flag-5'>組件</b>:Swiper

    鴻蒙ArkTS容器組件:Tabs

    通過頁簽進行內容視圖切換的容器組件,每個頁簽對應一個內容視圖。
    的頭像 發表于 07-15 09:48 ?810次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>容器</b><b class='flag-5'>組件</b>:Tabs

    鴻蒙ArkTS容器組件:WaterFlow

    瀑布流容器,由“行”和“列”分割的單元格所組成,通過容器自身的排列規則,將不同大小的“項目”自上而下,如瀑布般緊密布局。
    的頭像 發表于 07-15 17:35 ?414次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>容器</b><b class='flag-5'>組件</b>:WaterFlow
    主站蜘蛛池模板: 色橹橹欧美在线观看视频高| 99亚洲精品色情无码久久| 十8禁用B站在线看漫画| 欧美午夜精品一区二区蜜桃| 久久亚洲伊人中字综合精品| 果冻传媒在线观看网站| 国产精品无码人妻在线| 国产成人v视频在线观看| 成年妇女免费播放| 把腿张开再深点好爽宝贝动态图| 99热国产这里只有精品免费| 最近中文字幕MV免费高清在线 | 国产午夜福利片| 国产精品一区二区三区免费| 国产精品久久精品视| 国产乱码一区二区三区| 国产久久亚洲美女久久| 国产三级精品三级在线观看| 国产一卡2卡3卡4卡孕妇网站| 国精产品一区二区三区四区糖心| 国产在线精品亚洲另类| 韩国无遮羞禁动漫在线观看96 | 扒开小处30p| 国产ts调教| 国产人妻777人伦精品HD| 国产中的精品AV一区二区| 狠狠色狠狠色综合日日92| 金发欧美一区在线观看| 老人FREE VIODES老少配| 免费撕开胸罩吮胸视频| 翘臀少妇被扒开屁股日出水爆乳| 日本妈妈在线观看中文字幕| 色综合久久中文色婷婷| 亚洲qvod图片区电影| 亚洲字幕在线观看| 5g在视影讯天天5g免费观看| chinese黑人第一次| 国产成人啪精品视频免费网 | 99蜜桃在线观看免费视频网站| 99视频精品国产在线视频| 俄罗斯XBXBXB兽交|