概述
柵格布局是一種通用的輔助定位工具符喝，對(duì)移動(dòng)設(shè)備的界面設(shè)計(jì)有較好的借鑒作用。主要優(yōu)勢(shì)包括：
提供可循的規(guī)律：柵格布局可以為布局提供規(guī)律性的結(jié)構(gòu)爵赵，解決多尺寸多設(shè)備的動(dòng)態(tài)布局問(wèn)題吝秕。通過(guò)將頁(yè)面劃分為等寬的列數(shù)和行數(shù)，可以方便地對(duì)頁(yè)面元素進(jìn)行定位和排版空幻。
統(tǒng)一的定位標(biāo)注：柵格布局可以為系統(tǒng)提供一種統(tǒng)一的定位標(biāo)注，保證不同設(shè)備上各個(gè)模塊的布局一致性容客。這可以減少設(shè)計(jì)和開(kāi)發(fā)的復(fù)雜度秕铛，提高工作效率。
靈活的間距調(diào)整方法：柵格布局可以提供一種靈活的間距調(diào)整方法缩挑，滿足特殊場(chǎng)景布局調(diào)整的需求但两。通過(guò)調(diào)整列與列之間和行與行之間的間距，可以控制整個(gè)頁(yè)面的排版效果供置。
自動(dòng)換行和自適應(yīng)：柵格布局可以完成一對(duì)多布局的自動(dòng)換行和自適應(yīng)谨湘。當(dāng)頁(yè)面元素的數(shù)量超出了一行或一列的容量時(shí)，他們會(huì)自動(dòng)換到下一行或下一列芥丧，并且在不同的設(shè)備上自適應(yīng)排版紧阔，使得頁(yè)面布局更加靈活和適應(yīng)性強(qiáng)。
GridRow為柵格容器組件续担，需與柵格子組件GridCol在柵格布局場(chǎng)景中聯(lián)合使用擅耽。
柵格容器GridRow
柵格系統(tǒng)斷點(diǎn)
柵格系統(tǒng)以設(shè)備的水平寬度（屏幕密度像素值，單位vp）作為斷點(diǎn)依據(jù)物遇，定義設(shè)備的寬度類型乖仇，形成了一套斷點(diǎn)規(guī)則。開(kāi)發(fā)者可根據(jù)需求在不同的斷點(diǎn)區(qū)間實(shí)現(xiàn)不同的頁(yè)面布局效果询兴。
柵格系統(tǒng)默認(rèn)斷點(diǎn)將設(shè)備寬度分為xs乃沙、sm、md诗舰、lg四類警儒，尺寸范圍如下：
在GridRow柵格組件中，允許開(kāi)發(fā)者使用breakpoints自定義修改斷點(diǎn)的取值范圍始衅，最多支持6個(gè)斷點(diǎn)冷蚂，除了默認(rèn)的四個(gè)斷點(diǎn)外缭保，還可以啟用xl，xxl兩個(gè)斷點(diǎn)蝙茶，支持六種不同尺寸（xs, sm, md, lg, xl, xxl）設(shè)備的布局設(shè)置着茸。
- 針對(duì)斷點(diǎn)位置，開(kāi)發(fā)者根據(jù)實(shí)際使用場(chǎng)景群凶，通過(guò)一個(gè)單調(diào)遞增數(shù)組設(shè)置昂芜。由于breakpoints最多支持六個(gè)斷點(diǎn)，單調(diào)遞增數(shù)組長(zhǎng)度最大為5蹄衷。
breakpoints: {value: ['100vp', '200vp']}
表示啟用xs忧额、sm、md共3個(gè)斷點(diǎn)愧口，小于100vp為xs睦番，100vp-200vp為sm，大于200vp為md耍属。
breakpoints: {value: ['320vp', '520vp', '840vp', '1080vp']}
- 柵格系統(tǒng)通過(guò)監(jiān)聽(tīng)窗口或容器的尺寸變化進(jìn)行斷點(diǎn)托嚣，通過(guò)reference設(shè)置斷點(diǎn)切換參考物。 考慮到應(yīng)用可能以非全屏窗口的形式顯示厚骗，以應(yīng)用窗口寬度為參照物更為通用示启。
例如，使用柵格的默認(rèn)列數(shù)12列领舰，通過(guò)斷點(diǎn)設(shè)置將應(yīng)用寬度分成六個(gè)區(qū)間夫嗓，在各區(qū)間中，每個(gè)柵格子元素占用的列數(shù)均不同冲秽。
GridRow({
breakpoints: {
value: ['200vp', '300vp', '400vp', '500vp', '600vp'],
reference: BreakpointsReference.WindowSize
}
}){
GridCol({
span: {
xs: 2, // 在最小寬度類型設(shè)備上舍咖，柵格子組件占據(jù)的柵格容器2列。
sm: 3, // 在小寬度類型設(shè)備上劳跃，柵格子組件占據(jù)的柵格容器3列谎仲。
md: 4, // 在中等寬度類型設(shè)備上，柵格子組件占據(jù)的柵格容器4列刨仑。
lg: 6, // 在大寬度類型設(shè)備上郑诺，柵格子組件占據(jù)的柵格容器6列。
xl: 8, // 在特大寬度類型設(shè)備上杉武，柵格子組件占據(jù)的柵格容器8列辙诞。
xxl: 12 // 在超大寬度類型設(shè)備上，柵格子組件占據(jù)的柵格容器12列轻抱。
}
}){
Row(){
Text('新聞')
}.backgroundColor(Color.Red).width(100).height(100)
}
GridCol({
span: {
xs: 2, // 在最小寬度類型設(shè)備上飞涂，柵格子組件占據(jù)的柵格容器2列。
sm: 3, // 在小寬度類型設(shè)備上，柵格子組件占據(jù)的柵格容器3列较店。
md: 4, // 在中等寬度類型設(shè)備上士八，柵格子組件占據(jù)的柵格容器4列。
lg: 6, // 在大寬度類型設(shè)備上梁呈，柵格子組件占據(jù)的柵格容器6列婚度。
xl: 8, // 在特大寬度類型設(shè)備上，柵格子組件占據(jù)的柵格容器8列官卡。
xxl: 12 // 在超大寬度類型設(shè)備上蝗茁，柵格子組件占據(jù)的柵格容器12列。
}
}){
Row(){
Text('新聞')
}.backgroundColor(Color.Red).width(100).height(100)
}
GridCol({
span: {
xs: 2, // 在最小寬度類型設(shè)備上寻咒，柵格子組件占據(jù)的柵格容器2列哮翘。
sm: 3, // 在小寬度類型設(shè)備上，柵格子組件占據(jù)的柵格容器3列毛秘。
md: 4, // 在中等寬度類型設(shè)備上饭寺，柵格子組件占據(jù)的柵格容器4列。
lg: 6, // 在大寬度類型設(shè)備上叫挟，柵格子組件占據(jù)的柵格容器6列佩研。
xl: 8, // 在特大寬度類型設(shè)備上，柵格子組件占據(jù)的柵格容器8列霞揉。
xxl: 12 // 在超大寬度類型設(shè)備上，柵格子組件占據(jù)的柵格容器12列晰骑。
}
}){
Row(){
Text('新聞')
}.backgroundColor(Color.Red).width(100).height(100)
}
GridCol({
span: {
xs: 2, // 在最小寬度類型設(shè)備上适秩，柵格子組件占據(jù)的柵格容器2列。
sm: 3, // 在小寬度類型設(shè)備上硕舆，柵格子組件占據(jù)的柵格容器3列秽荞。
md: 4, // 在中等寬度類型設(shè)備上，柵格子組件占據(jù)的柵格容器4列抚官。
lg: 6, // 在大寬度類型設(shè)備上扬跋，柵格子組件占據(jù)的柵格容器6列。
xl: 8, // 在特大寬度類型設(shè)備上凌节，柵格子組件占據(jù)的柵格容器8列钦听。
xxl: 12 // 在超大寬度類型設(shè)備上，柵格子組件占據(jù)的柵格容器12列倍奢。
}
}){
Row(){
Text('新聞')
}.backgroundColor(Color.Red).width(100).height(100)
}
GridCol({
span: {
xs: 2, // 在最小寬度類型設(shè)備上朴上，柵格子組件占據(jù)的柵格容器2列。
sm: 3, // 在小寬度類型設(shè)備上卒煞，柵格子組件占據(jù)的柵格容器3列痪宰。
md: 4, // 在中等寬度類型設(shè)備上，柵格子組件占據(jù)的柵格容器4列。
lg: 6, // 在大寬度類型設(shè)備上乖订，柵格子組件占據(jù)的柵格容器6列。
xl: 8, // 在特大寬度類型設(shè)備上具练，柵格子組件占據(jù)的柵格容器8列乍构。
xxl: 12 // 在超大寬度類型設(shè)備上，柵格子組件占據(jù)的柵格容器12列靠粪。
}
}){
Row(){
Text('新聞')
}.backgroundColor(Color.Red).width(100).height(100)
}
GridCol({
span: {
xs: 2, // 在最小寬度類型設(shè)備上蜡吧，柵格子組件占據(jù)的柵格容器2列。
sm: 3, // 在小寬度類型設(shè)備上占键，柵格子組件占據(jù)的柵格容器3列昔善。
md: 4, // 在中等寬度類型設(shè)備上，柵格子組件占據(jù)的柵格容器4列畔乙。
lg: 6, // 在大寬度類型設(shè)備上君仆，柵格子組件占據(jù)的柵格容器6列。
xl: 8, // 在特大寬度類型設(shè)備上牲距，柵格子組件占據(jù)的柵格容器8列返咱。
xxl: 12 // 在超大寬度類型設(shè)備上，柵格子組件占據(jù)的柵格容器12列牍鞠。
}
}){
Row(){
Text('新聞')
}.backgroundColor(Color.Red).width(100).height(100)
}
}
布局的總列數(shù)
GridRow中通過(guò)columns設(shè)置柵格布局的總列數(shù)咖摹。
- columns默認(rèn)值為12，即在未設(shè)置columns時(shí)难述，任何斷點(diǎn)下萤晴，柵格布局被分成12列。
@State bgColor: Color[] = [
Color.Red,
Color.Yellow,
Color.Gray,
Color.Green,
Color.Black,
Color.Blue,
Color.Pink,
Color.Orange,
Color.Pink,
Color.Brown,
Color.Gray,
Color.Black,
];
...
GridRow(){
ForEach(this.bgColor, (item: Color, index: number)=>{
GridCol(){
Row(){
Text(index.toString()).textAlign(TextAlign.Center)
}.width(100).height(100).backgroundColor(item)
}
})
}
- 當(dāng)columns為自定義值胁后，柵格布局在任何尺寸設(shè)備下都被分為columns列店读。下面分別設(shè)置柵格布局列數(shù)為4，子元素默認(rèn)占一列攀芯，效果如下：
GridRow({ columns: 4 }){
ForEach(this.bgColor, (item: Color, index: number)=>{
GridCol(){
Row(){
Text(index.toString()).textAlign(TextAlign.Center)
}.width(100).height(100).backgroundColor(item)
}
})
}
- 當(dāng)columns類型為GridRowColumnOption時(shí)屯断，支持下面六種不同尺寸（xs, sm, md, lg, xl, xxl）設(shè)備的總列數(shù)設(shè)置，各個(gè)尺寸下數(shù)值可不同侣诺。
GridRow({ columns: { sm: 2, md: 4, lg: 8 }, breakpoints: { value: ['200vp', '300vp', '400vp', '500vp', '600vp'] } }){
ForEach(this.bgColor, (item: Color, index: number)=>{
GridCol(){
Row(){
Text(index.toString()).textAlign(TextAlign.Center)
.width('100%')
}.width('100%').height(100).backgroundColor(item)
}
})
}
若只設(shè)置sm, md的柵格總列數(shù)殖演，則較小的尺寸使用默認(rèn)columns值12，較大的尺寸使用前一個(gè)尺寸的columns紧武。這里只設(shè)置sm: 2, md: 4, lg: 8剃氧，則較小尺寸的xs:12，較大尺寸的參照md的設(shè)置阻星，lg:8, xl:8, xxl:8
排列方向
柵格布局中朋鞍，可以通過(guò)設(shè)置GridRow的direction屬性來(lái)指定柵格子組件在柵格容器中的排列方向已添。該屬性可以設(shè)置為GridRowDirection.Row（從左往右排列）或GridRowDirection.RowReverse（從右往左排列），以滿足不同的布局需求滥酥。通過(guò)合理的direction屬性設(shè)置更舞，可以使得頁(yè)面布局更加靈活和符合設(shè)計(jì)要求。
- 子組件默認(rèn)從左往右排列坎吻。
GridRow({ direction: GridRowDirection.Row }){}
- 子組件從右往左排列缆蝉。
GridRow({ direction: GridRowDirection.RowReverse }){}
子組件間距
GridRow中通過(guò)gutter屬性設(shè)置子元素在水平和垂直方向的間距。
- 當(dāng)gutter類型為number時(shí)瘦真，同時(shí)設(shè)置柵格子組件間水平和垂直方向邊距且相等刊头。下例中，設(shè)置子組件水平與垂直方向距離相鄰元素的間距為10诸尽。
GridRow({ gutter: 10 }){}
- 當(dāng)gutter類型為GutterOption時(shí)原杂，單獨(dú)設(shè)置柵格子組件水平垂直邊距，x屬性為水平方向間距您机，y為垂直方向間距穿肄。
GridRow({ gutter: { x: 20, y: 50 } }){}
子組件GridCol
GridCol組件作為GridRow組件的子組件，通過(guò)給GridCol傳參或者設(shè)置屬性兩種方式际看，設(shè)置span（占用列數(shù)）咸产，offset（偏移列數(shù)），order（元素序號(hào)）的值仲闽。
- 設(shè)置span脑溢。
GridCol({ span: 2 }){}
GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }){}
GridCol(){}.span(2)
- 設(shè)置offset。
GridCol({ offset: 2 }){}
GridCol({ offset: { xs: 2, sm: 2, md: 2, lg: 2 } }){}
- 設(shè)置order赖欣。
GridCol({ order: 2 }){}
GridCol({ order: { xs: 1, sm: 2, md: 3, lg: 4 } }){}
GridCol(){}.order(2)
span
子組件占柵格布局的列數(shù)焚志，決定了子組件的寬度，默認(rèn)為1畏鼓。
- 當(dāng)類型為number時(shí)，子組件在所有尺寸設(shè)備下占用的列數(shù)相同壶谒。
// 一行2個(gè)
GridCol({ span: 2 })
- 當(dāng)類型為GridColColumnOption時(shí)云矫，支持六種不同尺寸（xs, sm, md, lg, xl, xxl）設(shè)備中子組件所占列數(shù)設(shè)置，各個(gè)尺寸下數(shù)值可不同汗菜。
GridCol({
span: { xs: 1, sm: 2, md: 3, lg: 4 }
})
offset
柵格子組件相對(duì)于前一個(gè)子組件的偏移列數(shù)让禀，默認(rèn)為0。
- 當(dāng)類型為number時(shí)陨界，子組件偏移相同列數(shù)
GridCol({
offset: 1
})
- 當(dāng)類型為GridColColumnOption時(shí)巡揍，支持六種不同尺寸（xs, sm, md, lg, xl, xxl）設(shè)備中子組件所占列數(shù)設(shè)置,各個(gè)尺寸下數(shù)值可不同。
GridCol({ offset: { xs: 1, sm: 2, md: 3, lg: 4 } })
order
柵格子組件的序號(hào)菌瘪，決定子組件排列次序腮敌。當(dāng)子組件不設(shè)置order或者設(shè)置相同的order, 子組件按照代碼順序展示阱当。當(dāng)子組件設(shè)置不同的order時(shí)，order較小的組件在前糜工，較大的在后弊添。
當(dāng)子組件部分設(shè)置order，部分不設(shè)置order時(shí)捌木，未設(shè)置order的子組件依次排序靠前油坝，設(shè)置了order的子組件按照數(shù)值從小到大排列。
- 當(dāng)類型為number時(shí)刨裆，子組件在任何尺寸下排序次序一致澈圈。
GridRow({
breakpoints: {
value: ['200vp', '300vp', '400vp', '500vp', '600vp'],
reference: BreakpointsReference.WindowSize
}
}){
GridCol({
order: 3
}){
Row(){
Text('新聞1')
}.backgroundColor(Color.Red).width('100%').height(100)
}
GridCol({
order: 2
}){
Row(){
Text('新聞2')
}.backgroundColor(Color.Red).width('100%').height(100)
}
GridCol({
}){
Row(){
Text('新聞3')
}.backgroundColor(Color.Red).width('100%').height(100)
}
}
- 當(dāng)類型為GridColColumnOption時(shí)，支持六種不同尺寸（xs, sm, md, lg, xl, xxl）設(shè)備中子組件排序次序設(shè)置帆啃。在xs設(shè)備中瞬女，子組件排列順序?yàn)?234；sm為2341链瓦，md為3412拆魏，lg為2431。
GridCol({ order: { xs:1, sm:5, md:3, lg:7}})
綜上所述慈俯，柵格組件提供了豐富的自定義能力渤刃，功能異常靈活和強(qiáng)大。只需要明確柵格在不同斷點(diǎn)下的Columns贴膘、Margin卖子、Gutter及span等參數(shù)，即可確定最終布局刑峡，無(wú)需關(guān)心具體的設(shè)備類型及設(shè)備狀態(tài)（如橫豎屏）等洋闽。
