diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md index 0f6a52a9b060be178339cc7c8002606484bccd23..e4a0722bda929988aa717c14e98c8bd5b806917f 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md @@ -27,8 +27,8 @@ Grid(scroller?: Scroller) | å称 | å‚数类型 | æè¿° | | -------- | -------- | -------- | -| columnsTemplate | string | 设置当å‰ç½‘æ ¼å¸ƒå±€åˆ—çš„æ•°é‡ï¼Œä¸è®¾ç½®æ—¶é»˜è®¤1列。<br/>例如, '1fr 1fr 2fr' 是将父组件分3列,将父组件å…许的宽分为4ç‰ä»½ï¼Œç¬¬ä¸€åˆ—å 1份,第二列å 1份,第三列å 2份。<br/>默认值:'1fr' | -| rowsTemplate | string | 设置当å‰ç½‘æ ¼å¸ƒå±€è¡Œçš„æ•°é‡ï¼Œä¸è®¾ç½®æ—¶é»˜è®¤1行。<br/>例如, '1fr 1fr 2fr'是将父组件分三行,将父组件å…许的高分为4ç‰ä»½ï¼Œç¬¬ä¸€è¡Œå 1份,第二行å 一份,第三行å 2份。<br/>默认值:'1fr' | +| columnsTemplate | string | 设置当å‰ç½‘æ ¼å¸ƒå±€åˆ—çš„æ•°é‡ï¼Œä¸è®¾ç½®æ—¶é»˜è®¤1列。<br/>例如, '1fr 1fr 2fr' 是将父组件分3列,将父组件å…许的宽分为4ç‰ä»½ï¼Œç¬¬ä¸€åˆ—å 1份,第二列å 1份,第三列å 2份。| +| rowsTemplate | string | 设置当å‰ç½‘æ ¼å¸ƒå±€è¡Œçš„æ•°é‡ï¼Œä¸è®¾ç½®æ—¶é»˜è®¤1行。<br/>例如, '1fr 1fr 2fr'是将父组件分三行,将父组件å…许的高分为4ç‰ä»½ï¼Œç¬¬ä¸€è¡Œå 1份,第二行å 一份,第三行å 2份。 | | columnsGap | Length | 设置列与列的间è·ã€‚<br/>默认值:0 | | rowsGap | Length | 设置行与行的间è·ã€‚<br/>默认值:0 | | scrollBar | [BarState](ts-appendix-enums.md#barstate) | 设置滚动æ¡çŠ¶æ€ã€‚<br/>默认值:BarState.Off | @@ -37,12 +37,32 @@ Grid(scroller?: Scroller) | cachedCount | number | è®¾ç½®é¢„åŠ è½½çš„GridItemçš„æ•°é‡ã€‚具体使用å¯å‚考[å‡å°‘应用白å—说明](../../ui/ts-performance-improvement-recommendation.md#å‡å°‘应用滑动白å—)。<br/>默认值:1 | | editMode <sup>8+</sup> | boolean | 设置Grid是å¦è¿›å…¥ç¼–辑模å¼ï¼Œè¿›å…¥ç¼–辑模å¼å¯ä»¥æ‹–拽Grid组件内部[GridItem](ts-container-griditem.md)。<br/>默认值:flase | | layoutDirection<sup>8+</sup> | [GridDirection](#griddirection8枚举说明) | 设置布局的主轴方å‘。<br/>默认值:GridDirection.Row | -| maxCount<sup>8+</sup> | number | 当layoutDirection是Row/RowReverse时,表示å¯æ˜¾ç¤ºçš„最大行数<br/>当layoutDirection是Column/ColumnReverse时,表示å¯æ˜¾ç¤ºçš„最大列数。<br/>默认值:1 | -| minCount<sup>8+</sup> | number | 当layoutDirection是Row/RowReverse时,表示å¯æ˜¾ç¤ºçš„最å°è¡Œæ•°ã€‚<br/>当layoutDirection是Column/ColumnReverse时,表示å¯æ˜¾ç¤ºçš„最å°åˆ—数。<br/>默认值:1 | -| cellLength<sup>8+</sup> | number | 当layoutDirection是Row/RowReverse时,表示一行的高度。<br/>当layoutDirection是Column/ColumnReverse时,表示一列的宽度。<br/>默认值:0 | +| maxCount<sup>8+</sup> | number | 当layoutDirection是Row/RowReverse时,表示å¯æ˜¾ç¤ºçš„最大列数<br/>当layoutDirection是Column/ColumnReverse时,表示å¯æ˜¾ç¤ºçš„最大行数。<br/>默认值:Infinity | +| minCount<sup>8+</sup> | number | 当layoutDirection是Row/RowReverse时,表示å¯æ˜¾ç¤ºçš„最å°åˆ—数。<br/>当layoutDirection是Column/ColumnReverse时,表示å¯æ˜¾ç¤ºçš„最å°è¡Œæ•°ã€‚<br/>默认值:1 | +| cellLength<sup>8+</sup> | number | 当layoutDirection是Row/RowReverse时,表示一行的高度。<br/>当layoutDirection是Column/ColumnReverse时,表示一列的宽度。<br/>é»˜è®¤å€¼ï¼šç¬¬ä¸€ä¸ªå…ƒç´ çš„å¤§å° | | multiSelectable<sup>8+</sup> | boolean | 是å¦å¼€å¯é¼ æ ‡æ¡†é€‰ã€‚<br/>默认值:false<br/>- false:关é—框选。<br/>- true:开å¯æ¡†é€‰ã€‚ | | supportAnimation<sup>8+</sup> | boolean | 是å¦æ”¯æŒåŠ¨ç”»ã€‚<br/>默认值:false | +Gridç»„ä»¶æ ¹æ®rowsTemplateã€columnsTemplate属性的设置情况,å¯åˆ†ä¸ºä»¥ä¸‹ä¸‰ç§å¸ƒå±€æ¨¡å¼ï¼š + +1ã€rowsTemplateã€columnsTemplateåŒæ—¶è®¾ç½®ï¼š + +Gridåªå±•ç¤ºå›ºå®šè¡Œåˆ—æ•°çš„å…ƒç´ ï¼Œå…¶ä½™å…ƒç´ ä¸å±•ç¤ºï¼Œä¸”Gridä¸å¯æ»šåŠ¨ã€‚例如rowsTemplateã€columnsTemplate都设置为"1fr 1fr"时,则仅展示两行两列,共4ä¸ªå…ƒç´ ï¼Œå…¶ä»–å…ƒç´ ä¸å±•ç¤ºã€‚ + +æ¤æ¨¡å¼ä¸‹ä»¥ä¸‹å±žæ€§ä¸ç”Ÿæ•ˆï¼šlayoutDirectionã€maxCountã€minCountã€cellLength。 + +2ã€rowsTemplateã€columnsTemplate仅设置其ä¸çš„一个: + +å…ƒç´ æŒ‰ç…§è®¾ç½®çš„æ–¹å‘è¿›è¡ŒæŽ’å¸ƒï¼Œè¶…å‡ºçš„å…ƒç´ å¯é€šè¿‡æ»šåŠ¨çš„æ–¹å¼å±•ç¤ºã€‚例如Grid有åä¸ªå…ƒç´ ï¼Œä¸”è®¾ç½®columnsTemplate为"1fr 1fr 1fr",则Gridæœ‰ä¸‰åˆ—ï¼Œå…ƒç´ å…ˆå¡«æ»¡ä¸€è¡Œï¼Œå†å¡«å……下一行。在GridåŒºåŸŸå¤–çš„å…ƒç´ ï¼Œå¯é€šè¿‡ç«–ç›´æ–¹å‘的滚动,进行展示。 + +æ¤æ¨¡å¼ä¸‹ä»¥ä¸‹å±žæ€§ä¸ç”Ÿæ•ˆï¼šlayoutDirectionã€maxCountã€minCountã€cellLength。 + +3ã€rowsTemplateã€columnsTemplate都ä¸è®¾ç½®ï¼š + +å…ƒç´ åœ¨layoutDirectionæ–¹å‘上排布,列数由Grid的宽度ã€é¦–ä¸ªå…ƒç´ çš„å®½åº¦ã€minCountã€maxCountã€columnsGapå…±åŒå†³å®šï¼›è¡Œæ•°ç”±Grid高度ã€é¦–ä¸ªå…ƒç´ é«˜åº¦ã€cellLengthã€rowsGapå…±åŒå†³å®šã€‚è¶…å‡ºè¡Œåˆ—å®¹çº³èŒƒå›´çš„å…ƒç´ ä¸æ˜¾ç¤ºï¼Œä¹Ÿä¸èƒ½é€šè¿‡æ»šåŠ¨è¿›è¡Œå±•ç¤ºã€‚ + +æ¤æ¨¡å¼ä¸‹ä»…生效以下属性:layoutDirectionã€maxCountã€minCountã€cellLengthã€editModeã€columnsGapã€rowsGap。 + ## GridDirection<sup>8+</sup>枚举说明 | å称 | æè¿° |