無程式碼表單流程設計——佈局元件(二)

無程式碼表單流程設計——佈局元件(二)

上一篇我們講到,無程式碼流程表單設計器雀書的佈局元件——“容器”。容器作為佈局元件主要作用有兩個:調節欄位長度、元件邊距等欄位佈局;容納一個或多個元件。當然,除了容器,雀書還擁有分欄、選項卡和分隔線等佈局元素。今天,我們來了解這幾種元素。

分欄

分欄其實在上一文中已有提及和用到。

作用:調整元件佈局,和容器類似,調整單行內元件比例,及行邊距。如圖。

無程式碼表單流程設計——佈局元件(二)

用法:

1。 點選“分欄”的元件,工作臺區域會出現一個集兩個區域為一行的容器,這是點選1次的效果。如果對其中一個部分點選鎖定,再次點選“分欄”的按鈕,則會將鎖定是1/2區域再次一分為二。一次類推。

無程式碼表單流程設計——佈局元件(二)

無程式碼表單流程設計——佈局元件(二)

2。 調整邊距。使用方法同上一篇的“容器”,點選需要調整的“分欄”元件,在右側的屬性配置一欄的“樣式屬性”-佈局中調整上下左右的邊距。

無程式碼表單流程設計——佈局元件(二)

優點:佈局的比例多樣化,調節;佈局邊距樣式多樣化,方便美觀。

缺點:與容器的功能有些重複,不過聽說後期容器只是調整背景色,在佈局上進一步最佳化。

選項卡

選項卡就是tap元件。這麼說好像有點抽象。簡單來說,我需要設定具體場景,不同場景(填寫人)需要不同的表單(元件)收集資訊什麼的,這時候就可以採用選項卡。

無程式碼表單流程設計——佈局元件(二)

用法:直接點選“選項卡”元件。根據需求,在不同的選項下放置元件,可透過右側“屬性配置”更改選項標題和新增選項。

無程式碼表單流程設計——佈局元件(二)

無程式碼表單流程設計——佈局元件(二)

無程式碼表單流程設計——佈局元件(二)

優點:方便不同場景下的表單使用。

分隔線

分隔線,線如其名,就是將上下兩部分的表單分隔開的線。

無程式碼表單流程設計——佈局元件(二)

作用:

1。 分隔表單組成部分;

2。 補充說明分隔線下的內容。因為分隔線的標題是可在右側“屬性配置”一欄編輯的,所以當有需要時,可以透過編輯標題說明內容。如圖,把分隔線上移到選項卡上方,更改分隔線上的文字標題為“其他資訊”。

無程式碼表單流程設計——佈局元件(二)

(PS:可以透過元件右側的兩個黑色的小三角一點元件的位置。)

優點:豐富表單組成和外觀設計。