【筆記】- 捲動的 UI 元件？以 TEXT 元件為例

如何捲動 UI 的 TEXT 元件？

(1) 在某個 Image 子元件 (一定要有 Image 的元件...)下，加入 ScrollView Component，並於 ScrollView 內 Viewport->Content 下加入 Text Component：

(2) 將 Text 拉進去Scroll View -> Scroll Rect 內的 Content

(3) 如上的配置範例圖，若是只要上下自動縮放 Text 內容，以供 ScrollView 做左右、上下捲動，只要在 Text Component (本例名為 DocSenseText)中加入類別 Content Size Filter 並設定 Content Size Filter 內的屬性 Horizontal Fit 及 Vorticol Fit 即可．本例只做上下捲動，所以，將 Horizontal Fit 設定為 Unconstrained (自訂、固定)，Vorticol fit 則設定為 Preferred Size (自動縮放)．如此，當 Text 內文變動時，就會自動縮放為適合 Text 內容的上下高度 height，但左右寬度則依照 Text 目前訂好的寬度 width 不動！

(4) Scroll bar 隱藏

若是只要觸控將 ScrollView 內的 UI 元件捲動，也可將 Scroll bar 隱藏，只要不勾選 Scrollbar Vertical -> InteractabIe 即可，但若要一併消掉 Scroll bar 佔用的畫面空間，則可將 Rect Transform 的 Width 設定為 1！