研究各種UI元件

Hank
彼得潘的 Swift iOS / Flutter App 開發教室
4 min readMar 21, 2022

學習進步除了上課認真聽之外,課前預習、課後複習也是非常重要的。

所以除了上課教的元件外,也要來研究一下其他UI元件。

Segmented Control

切換分類的元件。

1 Segments-可以設定標籤的格數(增加或減少)
2 Segment-可以切換到你要的標籤,並更改參數
3 Title-修改名稱
4 Image-更換圖片
5 Selected-變更標籤的背景顏色

Slider

滑動設定數值的元件。

1 Value-滑扭的預設量值
2 Minimum-最小值
3 Maximum-最大值
4 Min Image-最小值圖示
5 Max Image-最大值圖示
6 Min Track-從最小值開始往右拉的顏色
7 Max Track-從最大值開始往左拉的顏色
8 Thumb Tint-滑鈕的顏色

Switch

開關的元件。

1 State-開/關預設值
2 On Tint-On開啟時顏色
3 Thumb Tint-開關鈕顏色

Activity Indicator View

代表正在做某件事的進度條元件。

1 Style-選擇樣式Medium/Large
2 Color-調整顏色
3 Animating-勾選活動會轉動/無勾選就是不動

Progress View

顯示進度的進度條的元件。

1 Style-分為Default/Bar兩種,差別在於Default可以看到盡頭,Bar則無法
2 Progress-進度條的起始位置(最小值為0最大值為1)
3 Progress Tint-進度條走到的顏色
4 Track Tint-進度條未走到的軌道底色
5 Progress Image-進度條走到的進度用圖式/圖片表示(用tint顯示時,圖片無法顯示出來)
6 Track Image-進度條未走到的進度用圖式/圖片表示(用tint顯示時,圖片無法顯示出來)

Visual Effect View with Blur

調整視覺效果的元件。

Blur Style-挑選毛玻璃樣式,其中包含淺色系及深色系。

Page Control

小圓點,顯示有幾個分頁和目前在第幾個分頁。

1 # of Pages-總頁數
2 Current-起始頁在第幾頁開始
3 Hides for Single Page-只有一頁的話,會隱藏Page control
4 Tint Color-目前所在頁數顏色
5 Current Page-其他未顯示的頁數顏色

Date Picker

時間選擇的元件。

1 Preferred Style-更換樣式(共有四種可以選擇)
2 Mode-選擇顯示時間/日期/時間+日期/倒數計時
3 Locale-選擇區域,不同區域不同語言
4 Interval-時間間隔,最小值為1分鐘
5 Date-使用者一開啟的起始日期
6 Minimum Date-日期/時間的最小值
7 Maximum Date-日期/時間的最大值

--

--