決策報表佈局方式

1.1 版本

1.2 應用場景

決策報表的佈局是指決策報表 body 內所有組件的位置以及組件之間的間距所構成的佈局排版，一個好的佈局會讓你的範本看起來主次分明、清晰美觀。

決策報表的佈局方式主要分為兩類 —— 自適應佈局和絕對佈局，但自適應佈局下還包括兩種佈局效果 —— 非固定佈局和固定佈局。

本文將介紹這幾種佈局方式的特點差異以及各佈局的效果。

1.3 功能入口

• 「自適應佈局」和「絕對佈局」在「範本>PC端自适應屬性」中設置。

• 自适應布局下，「非固定佈局」和「固定佈局」在 body 畫布左下角處設置。

在正式介紹佈局方式之前，我們需要了解一個功能：佈局推薦。

建立決策報表時，會彈出範本佈局選擇介面，為使用者提供了多種常用的佈局效果。

• 可選擇不同數量的模組進行查看。

• 提供了「簡約查看」和「真實查看」兩種展示效果。

• 若直接選擇建立空白範本，範本預設為「自适應佈局>非固定佈局」。

• 若選擇帶佈局的範本，body 介面將會按照選擇的佈局展示 空白占位塊+間距。如下圖所示。

注1：「占位塊」指自適應佈局下用來放置組件的虛擬容器，空白範本初始沒有佔位塊。

注2：目前僅支援建立範本時選擇佈局，建立範本後不支援修改選擇其他佈局；不支援自訂佈局推薦。

3.1 自適應佈局→非固定佈局

建立決策報表時，無論選擇建立空白範本還是帶佈局的範本，範本預設佈局方式均為「自适應佈局>非固定佈局」。

空白範本初始無佔位塊，但新增組件時會隨之新增佔位塊。

建立了帶佈局的範本時，body 中的虛線框即「空白佔位塊」，空白佔位塊不支援任何操作，一個佔位塊只支援放置一個組件。

在右側屬性面板中「佈局」處，可設定組件間隔、內邊距。如下圖所示：

拖拽組件到 body 中時，僅支援拖入佔位塊所在的位置，若拖拽至非佔位塊的位置，會提示「無法新增到該區域」。

當向佔位塊拖入組件時，組件雙向鋪滿該佔位塊，右上角組件面板則顯示拖入的組件名稱。

移動或刪除組件時，佔位塊跟隨組件移動或刪除，佈局自動調整。

演示效果如下：

3.2 自適應佈局→固定佈局

• 空白範本初始無佔位塊，此時若切換為固定佈局，則不支援向 body 中拖入組件，提示「無法新增到該區域」。

• 固定佈局下 body 的組件間隔和內邊距置灰，不可編輯。如下圖所示。

• 拖拽組件時雙向鋪滿佔位塊，拖拽至非佔位塊的位置，會提示「無法新增到該區域」。

• 將組件拖拽至已有組件佔位塊時，會改寫掉原來的組件。

• 移動或刪除組件，不影響佔位塊的佈局。

• 兩個佔位塊的組件可實現位置調換。

3.3 絕對佈局

• 組件拖入到 body 中會保持組件本身大小，不會鋪滿 body，拖入時注意需將組件完全拖入 body 才可新增成功。

• 組件可重疊，可隨意放置位置。

• 組件支援多選，多選時可對組件進行排版對齊的設定，詳情請參見文檔：組件排版對齊 。

• 組件可透過右側屬性面板調整其位置及大小。

演示效果如下：

3.4 差異總結

看完上述三個佈局的示範，總結出以下幾個特點：

• 絕對佈局自由度最高，可隨意放置位置，支援組件重疊，但各組件之間的排版、對齊調整起來會比較費時費力。

• 自適應佈局的非固定佈局靈活度最高，可隨意改變佈局。

• 自適應佈局的固定佈局可固定範本佈局，適用於希望佈局不變，但組件可以隨意調整的場景。詳細對比如下表。

• 從自適應佈局切換為絕對佈局時，已經新增的組件位置不變，其他空白佔位塊消失；如下圖所示。

• 從絕對佈局切換為「自适應佈局」時，提示：切換後所有組件的位置都會改變且無法恢複，确認切換嗎？點選「確定」後，切換到「自適應佈局>非固定佈局」狀態。此時相當於建立空白範本時的狀態，組件自適應鋪滿 body ，且組件之間無間距。如下圖所示：

• 非固定佈局與固定佈局切換時，組件及佔位塊位置無變化。

注：如果是空白範本從「非固定佈局」切換為「非固定佈局」，此時不支援拖入組件。如下圖所示。