🎛️Slider

╱🚧 under construction

SwiftUI ⟩ controls ⟩ Slider

⚠️ 注意：Slider 範圍的變量必須是 BinaryFloatingPoint❗

// ⭐️ 設定小數位數(Slider 常用)
//   小數點前的位數(含正負號) ↴
Text("x：\(x, specifier: "%3.0f")")
    .font(.system(.body, design: .monospaced))    // ⭐️ 使用等寬字體

🔴 主題

• Slider label position

• 自製的 Slider：

  • SliderWithLabel

💾 程式

1. 使用預設範圍：0...1，適合連續範圍。

2. 指定範圍(in:)與間距(step:)，適合整數範圍。

3. 顯示最小值(minimumValueLabel:)與最大值(maximumValueLabel:)。

4. 指定事件(onEditingChanged:)處理方式。

1

// 注意：放在 view 的宣告部分
@State private var scale: CGFloat = 0.5
let monospace = Font.system(.body, design: .monospaced) // ⭐️ 等寬字體

// 注意：放在 view.body 部分
Slider(value: $scale)        // ⭐️ `in`: 預設範圍為 0...1 (可省略)
    .accentColor(.orange)    // ⭐️ 設定 slider 的顏色
    
// ⭐️ 設定小數位數(Slider 常用)
//   小數點前的位數(含正負號) ↴
Text("scale：\(scale, specifier: "%0.2f")")       // 兩位小數
    .font(.system(.body, design: .monospaced))    // ⭐️ 等寬字體

2

// 注意：放在 view 的宣告部分
@State private var step: CGFloat = 0

// 注意：放在 view.body 部分
HStack {
    // Slider 的顯示數值
    Text("作圖步驟：\(step, specifier: "%.0f")")  // ⭐️ 沒有小數部分
        .font(monospace)                        // ⭐️ 等寬字體
        .padding(.trailing)
    
    // ⭐️ 適合整數範圍
    Slider(value: $step, in: 0...5, step: 1)
        .frame(maxWidth: 300)
}

3

// 注意：放在 view 的宣告部分
@State private var age: CGFloat = 50

// 注意：放在 view.body 部分
// ⭐️ 顯示最大最小值
Slider(
    value: $age, in: 18...80, step : 1, 
    minimumValueLabel: Text("18"), // ╮ 這兩個 label 如果不是同型別，
    maximumValueLabel: Text("80")  // ╯ 似乎會產生錯誤❓
){ EmptyView() }                   // ⭐️ 不使用 `label`

4

// 注意：放在 view 的宣告部分
@State private var speed: CGFloat = 50

// 注意：放在 view.body 部分
// ⭐️ slider with min/max label
Slider(value: $speed, in: 0...100, step : 5) { 
    Text("Speed")         // slider label
} minimumValueLabel: { 
    Text("0")             // min label
} maximumValueLabel: { 
    Text("100")           // max label
} onEditingChanged: { 
    // ...                // event handler
}

👥 相關

• Text

• 自製的 Slider： SliderWithLabel

📘 手冊

• SwiftUI ⟩

  • Views and Controls ⟩ Slider
  • Font

    • system(_:design:weight:)：specifies style, design, and weight.
    • system(size:weight:design:)：specifies a system font.

📗 參考

• Paul ⟩ How to create a slider and read values from it - number format.
• SwiftUI Recipes ⟩ Custom Slider in SwiftUI
• swiftobc ⟩ SwiftUI Sliders with custom styles

💈範例

• TestIdealSizeView - to control parent's offered size.

• SlidersForSize - control width/height.

🖥️ 影片

tundsdev ⟩ Slider in SwiftUI

🗣 討論

• How to create custom slider by using SwiftUI?