史威夫特堆疊

Swift Stack 元件為簡單到複雜、適應性強的設計提供了一個框架。它採用網格顯示屬性並包含由 div 構成的單元格，這些單元格會自動設定為 flex。該元件由 8 個變體組成，使您能夠以不同的佈局放置內容。此外，您還可以選擇手動修改每個 Swift Stack 變體和 Swift Stack 儲存格尺寸，以更精確控制內容的呈現。 Swift Stack 用途廣泛，對於組織各種類型的內容（從突出部分到產品展示）非常有價值。

透過本教程，您將掌握：

1. 合併 Swift Stack 的方法
2. 設計 Swift Stack 的方法
3. 設計 Swift Stack 單元格樣式的方法

合併 Swift Stack 的方法

您可以透過以下方式引入 Swift Stack 新增面板 > 結構 區域。將 Swift Stack 拖曳到 Webflow 畫布上。畫布上將出現一個預設選單，讓您可以選擇 8 個 Swift Stack 變體之一。

Swift Stack 變體

Swift Stack 提供 8 種預設變體，每種都具有獨特的單元結構：

• 單列— 1 個儲存格，跨越 1 列和 1 行 
• 雙柱— 2 個儲存格，每個儲存格跨 1 列和 1 行
• 三重柱— 3 個儲存格，每個儲存格跨 1 列和 1 行
• 四聯柱— 4 個儲存格，每個儲存格跨 1 列和 1 行 
• 2 + 1— 3 個細胞。左列中有 2 個儲存格，每個儲存格跨越 1 列和 1 行。右列有 1 個儲存格，跨越 1 列和 2 行
• 1 + 2— 3 個細胞。左列中有 1 個儲存格，跨越 1 列和 2 行。右列有 2 個儲存格，每個儲存格跨越 1 列和 1 行
• 雙 2 x 2— 4 個細胞。左列有 2 個儲存格，每個儲存格跨 1 列和 1 行。右列有 2 個儲存格，每個儲存格跨越 1 列和 1 行
• 格式化雙精度 2 x 2 — 4 個細胞。頂行有 2 個儲存格，左側儲存格跨 2 列 1 行，右側儲存格跨 1 列 1 行。底行有 2 個儲存格，左側儲存格跨 1 列 1 行，右側儲存格跨 2 列 1 行

每個 Swift Stack 變體都有不同的用途。例如，您可以將雙列變體用於突出部分 - 將文字內容放置在右列中，將圖像放置在左列中。或者，您可以選擇 Double 2 x 2 變體來製作響應式的產品視覺效果展示。

設計 Swift Stack 的方法

您可以靈活地自訂 Swift Stack 的網格佈局、單元格之間的間距和簡報。預設情況下，Swift Stacks 在每個儲存格和 Swift Stack 的父元素之間有 20px 的邊距。

• 在 Swift Stack 中合併或消除行或列的過程
• 自訂 Swift Stack 中儲存格間距的方法
• 調整 Swift Stack 顯示的方法
• 調節行和列尺寸的方法
• 跨不同斷點設定 Swift Stack 樣式的過程

在 Swift Stack 中包含或刪除行或列的方法

您可以在 Swift Stack 中的 4 個位置引入或刪除行或列：

• 在畫布選單中
• 在樣式面板中
• 在編輯模式下
• Swift 堆疊內部

將行或列新增至 Swift Stack 後，儲存格的數量將與現有行和/或列的數量對齊。例如，如果您的 Swift Stack 包含 2 行和 1 列單元格，並且您追加一個新列，則 2 個單元格將添加到現有單元格的右側，形成其單獨的列。

注意： 將行或列引入 Swift Stack 時，新增的儲存格數量對應於行和列的計數 — 不是 目前存在的細胞數量。例如，如果您擁有一個 Swift Stack，其中 1 行包含 2 個儲存格，其中一個儲存格跨越 2 列，另一個儲存格跨越 1 列，則新增另一行將導致 Swift Stack 中包含 3 個儲存格。

刪除行或列也會清除行/列儲存格內的內容。

將行或列附加到畫布選單中的 Swift Stack

您可以透過右鍵單擊 Swift Stack，將滑鼠懸停在其中一個來引入行或列 新增欄目 或者 新增行，並選擇包含列或行的位置（例如，左側、右側、上方或下方）。

在「樣式」面板的 Swift Stack 中包含或刪除行或列

您可以透過選擇 Swift Stack 並導覽到來合併或排除行或列 風格面板 > 佈局 > 網格。隨後，您可以透過點擊「鎖定」和「解鎖」圖示從 Swift Stack 插入或刪除列和行。

從 Swift Stack 中刪除一行後，最低行中的儲存格將從 Swift Stack 中刪除。從 Swift Stack 中刪除列時，最右列中的儲存格將從 Swift Stack 中刪除。

在編輯模式下新增或清除 Swift Stack 中的行或列

您可以追加或丟棄行或列 編輯模式 在畫布上。選擇 Swift Stack 元素並點選 編輯 Swift 堆疊 點擊 Swift Stack 右上角以啟動編輯模式。若要引入新的行和列，請按一下右上角或左下角儲存格旁的「+」符號。可以點選儲存格標題來刪除行和列，然後選擇 刪除列 或者 刪除行 在畫布選單中。

退出 編輯模式， 打 Esc鍵 或按 完畢 在畫布上。

將行或列整合到 Swift Stack 內的 Swift Stack

您可以直接在畫布上的 Swift Stack 中註入行或列。若要新增行或列，請選擇一個 Swift Stack 儲存格，將滑鼠停留在儲存格頂部、底部、左側或右側的「藍點」上，然後點擊「+」符號。

自訂 Swift Stack 中儲存格間距的方法

您可以增加或減少 Swift Stack 中儲存格之間的邊距（即元素的外部空間）。每個單元格之間的初始間隙為 20 像素，您可以修改此間距。

若要調節此差距，請導航至 風格面板 > 佈局 > 差距。當「鎖定」圖示被啟動時，列和行單元格的間隙值將是統一的。對於列和行單元格中不同的間隙大小，解鎖「鎖定」圖示並自訂每個值。

符號並根據需要變更間距值。

您也可以透過造訪來修改儲存格之間的距離 編輯模式，將滑鼠懸停在 2 個單元格之間的空間上，然後按一下並拖曳以增加或減少間隙。如果“鎖」符號被固定在 風格面板 > 佈局 > 差距，拖曳時行距和列距值都會適應相同的值。如果“鎖” 符號已解鎖，您只能調整當前單擊並拖曳的間隙（即，行 或者 列間隙值）。

自訂快速堆疊外觀的指南

您可以透過選擇快速堆疊並導航到來自訂快速堆疊的外觀 風格面板 > 佈局 >  展示。在這裡，您可以選擇 展示 或者 隱藏 快速堆疊：

• 展示 - 顯示快速堆疊
• 隱藏—— 隱藏快速堆疊

如果需要選擇隱藏的快速堆疊，您可以在導航器中找到它。

設定行和列尺寸樣式的技術

預設情況下，每列的維度設定為 1 個小數單位 (FR)。每行的尺寸配置為自動，根據包含的內容調整大小。

若要修改 FR 尺寸或最小/最大尺寸，請轉至 編輯模式，選擇行標題或列標題，然後在畫布選單中調整尺寸。您也可以透過點擊並拖曳每行或列標題的邊緣來微調尺寸 編輯模式。除了編輯模式之外，還可以透過選擇單元格並拖曳單元格邊界上的調整大小手柄來進行尺寸調整。

在各種斷點上設定快速堆疊樣式的步驟

當選擇快速堆疊元素並從預設桌面斷點切換斷點時， 列 中的參數 風格面板 > 佈局 > 網格 顯示為灰色並引入新的“自動”值。 Webflow 將自動填充 排 值——基於 柱子 值已就位 - 以適合快速堆疊中的單元格數量。

有時，快速堆疊的 展示 和 網格 風格中呈現粉紅色的暗示 風格面板 > 佈局 — 表示這些風格屬於 獨自 到目前斷點上選定的元素。

Quick Stack 儲存格樣式的技術

除了桌面斷點之外，您還可以透過選擇畫布上的儲存格並存取來設定快速堆疊儲存格的樣式 風格面板 > 細胞尺寸。您可以將儲存格調整為跨 1 行或多列 尺寸。此外，您還可以更改 順序 細胞。關於 順序，您可以將儲存格定位為第一個、最後一個，或透過存取「三個披露點”並輸入一個值 順序 場地。請注意，要在儲存格上設定自訂順序值，您必須將大於 0 的順序值指派給快速堆疊中的所有其他儲存格。

使用桌面斷點時，您可以透過合併和取消合併儲存格來管理儲存格大小。

有時，細胞的 尺寸 和 順序 樣式顯示粉紅色指示 風格面板 > 細胞尺寸 — 表示這些樣式適用 只 到目前斷點處的選取儲存格。

筆記： Quick Stack 單元預設使用 Flexbox。

調整 Quick Stack 單元格間距的方法

您可以在快速堆疊單元格中新增內邊距，但不能新增邊距。如果您希望在單元格和父快速堆疊元素之間引入間距，則可以配置快速堆疊單元格之間的間隙。

合併Quick Stack單元格的方法

您可以將快速堆疊儲存格與其左側、右側、上方或下方的儲存格合併。需要注意的是，合併儲存格時，儲存格內的內容將會合併 進入 將被淘汰。

有 2 種方法可以合併快速堆疊單元格：

• 透過畫布上的菜單— 右鍵單擊要合併的儲存格，將滑鼠懸停在 合併儲存格 在畫布選單中，選擇合併儲存格的方向（即上、下、右、左）
• 使用畫布上的控件  — 選擇要合併的儲存格，將滑鼠懸停在與儲存格右側、左側、上方或下方相鄰的藍點上（取決於預期的合併方向），然後按一下 合併儲存格 圖示

筆記： 只有當儲存格與要合併的儲存格相比具有相同或更大的大小時，合併儲存格才可行。

取消合併 Quick Stack 單元的過程

有 2 種方法可以取消合併 Quick Stack 單元：

• 透過畫布上的菜單— 右鍵單擊要取消合併的儲存格並選擇 取消合併儲存格 在畫布選單中
• 透過樣式面板 - 選擇要取消合併的儲存格，導航到 風格面板 > 細胞尺寸，然後按一下 取消合併儲存格

筆記： 取消合併儲存格後，合併到的原始儲存格的內容將不會恢復。