網(wǎng)格列表是標(biāo)準(zhǔn)列表視圖的替代方法。

網(wǎng)格列表由以垂直和水平布局排列的重復(fù)單元格圖案組成。

網(wǎng)格列表最適用于類似的數(shù)據(jù)類型。它們有助于提高對(duì)其所包含內(nèi)容的視覺理解。

用法

網(wǎng)格列表最適合于呈現(xiàn)同質(zhì)數(shù)據(jù)（通常是圖像），并且針對(duì)視覺理解和區(qū)分相似數(shù)據(jù)類型進(jìn)行了優(yōu)化。

甲網(wǎng)格列表由重復(fù)圖案的細(xì)胞的網(wǎng)格列表內(nèi)垂直和水平排列。

平鋪包含內(nèi)容，可以垂直或水平跨越一個(gè)或多個(gè)單元格。

如果拼貼中的文本需要足夠突出以區(qū)分主要內(nèi)容片段，請(qǐng)考慮使用不同的容器，如列表或卡片，優(yōu)化用于顯示文本和促進(jìn)閱讀理解。

列表：針對(duì)閱讀理解進(jìn)行了優(yōu)化，尤其是在比較包含多種數(shù)據(jù)類型的一組數(shù)據(jù)時(shí)。

卡片：用于格式不一致的內(nèi)容，例如帶有可變長度字幕的照片，或具有異構(gòu)內(nèi)容的數(shù)據(jù)集，例如照片和視頻以及書籍的混合集合。

內(nèi)容

瓷片內(nèi)容

平鋪內(nèi)容包括主要內(nèi)容和次要內(nèi)容。主要內(nèi)容是主要的區(qū)分元素，通常是圖像。輔助內(nèi)容可以是動(dòng)作或文本。

為缺少主要內(nèi)容圖像的切片提供默認(rèn)圖像。

瓷片中的操作

主要內(nèi)容和輔助內(nèi)容上的操作（例如播放，放大，刪除或選擇）是立即的，通常不會(huì)導(dǎo)致網(wǎng)格列表中的選項(xiàng)子菜單（操作溢出）。

操作可以打開后續(xù)視圖，例如卡片。

主要行動(dòng)

• 填充整個(gè)圖塊，因此不會(huì)通過圖標(biāo)或文本表示
• 在特定網(wǎng)格列表中的整個(gè)圖塊中是一致的。例如，單個(gè)網(wǎng)格列表中所有切片的主要操作可能是查看圖像的詳細(xì)信息。

次要?jiǎng)幼骰騼?nèi)容

• 用圖標(biāo)或文字表示瓷磚
• 在特定網(wǎng)格列表中的整個(gè)圖塊中是一致的
• 放置在特定網(wǎng)格列表的切片內(nèi)的一致位置，但該一致位置可能在網(wǎng)格列表（角落或邊緣）之間變化。例如，一個(gè)網(wǎng)格列表中的所有標(biāo)題可以位于左下角，而另一個(gè)網(wǎng)格列表中的所有切片可以將標(biāo)題放在左上角。

行為

滾動(dòng)

網(wǎng)格列表通常僅垂直滾動(dòng)。

不鼓勵(lì)水平滾動(dòng)網(wǎng)格列表，因?yàn)闈L動(dòng)會(huì)干擾典型的閱讀模式，從而影響理解。一個(gè)值得注意的例外是水平滾動(dòng)的單行網(wǎng)格圖像列表，例如圖庫，它與典型的閱讀模式兼容。

在視圖的初始滾動(dòng)位置切斷網(wǎng)格圖塊以傳達(dá)內(nèi)容溢出的滾動(dòng)方向。

通過切斷網(wǎng)格圖塊來指示內(nèi)容溢出。

手勢(shì)

不允許使用每個(gè)切片滑動(dòng)操作。不鼓勵(lì)采取行動(dòng)。

平鋪過濾和排序

網(wǎng)格列表中的內(nèi)容可以按編程方式過濾或按日期，文件大小，字母順序或其他參數(shù)排序。

網(wǎng)格列表中的第一個(gè)項(xiàng)目位于網(wǎng)格列表的左上角，順序從左到右，從上到下進(jìn)行。

尺寸和尺寸調(diào)整

調(diào)整網(wǎng)格列表的大小會(huì)導(dǎo)致切片在水平空間可用時(shí)重新排序。全出血網(wǎng)格列表切片調(diào)整大小以適應(yīng)屏幕寬度。

當(dāng)水平空間收縮時(shí)，網(wǎng)格列表不會(huì)轉(zhuǎn)換為列表。網(wǎng)格列表和列表是用于強(qiáng)調(diào)不同數(shù)據(jù)類型的單獨(dú)結(jié)構(gòu)。網(wǎng)格列表優(yōu)先考慮文本上的圖像，并列出文本優(yōu)先于圖像。

要在整個(gè)網(wǎng)格列表中保持一致的節(jié)奏，請(qǐng)截?cái)鄬?duì)于圖塊寬度而言太長的文本內(nèi)容。或者，增加網(wǎng)格大小，以便切片可以容納更長的標(biāo)題。

響應(yīng)式設(shè)計(jì)

全屏網(wǎng)格列表應(yīng)使用具有最小和最大寬度的流體圖像比率，使用比率基線。它們應(yīng)該保持固定的高度，邊距和填充。

中心網(wǎng)格列表具有最小寬度的流體邊距。它們保持固定的圖像寬度，高度和填充。

標(biāo)注

網(wǎng)格列表頁眉/頁腳

單行頁眉/頁腳

高度：48dp
文本填充：16dp
默認(rèn)字體大小：16sp
輔助操作是向頁腳右側(cè)齊平。

雙行頁眉/頁腳

高度：68dp
文本填充：16dp
每行的默認(rèn)字體大小：16sp / 12sp或14sp / 14sp

僅圖像網(wǎng)格列表
網(wǎng)格列表填充：4dp或1dp
網(wǎng)格列表中的切片可以跨越多列。
仔細(xì)考慮在使用多列切片的網(wǎng)格列表中是否需要輔助文本，因?yàn)檩^大的切片可能會(huì)產(chǎn)生顯著的空白空間。

單行網(wǎng)格列表

純文本

高度：48dp
文本填充：16dp
默認(rèn)字體大小：16sp
網(wǎng)格列表填充：4dp或1dp

帶有圖標(biāo)的文本

高度：48dp
文本填充：16dp
默認(rèn)字體大小：16sp
網(wǎng)格列表填充：4dp或1dp

輔助動(dòng)作可以在頁腳或標(biāo)題內(nèi)向右齊平或向左齊平。

雙線網(wǎng)格列表

純文本

高度：68dp
文本填充：16dp
每行默認(rèn)字體大小：16sp / 12sp或14sp / 14sp
網(wǎng)格列表填充：4dp或1dp

帶有圖標(biāo)的文本

高度：68dp
文本填充：16dp
每行的默認(rèn)字體大小：16sp / 12sp或14sp / 14sp

輔助動(dòng)作可以在頁腳或標(biāo)題內(nèi)向右齊平或向左齊平。

網(wǎng)格列表填充：4dp或1dp

總結(jié)

以上是生活随笔為你收集整理的树型列表结构宽度调整_Material Design 网格列表的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。