🎛️Slider

╱🚧 under construction

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

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

Slider label position
自製的 Slider：
- SliderWithLabel

使用預設範圍：0...1，適合連續範圍。
指定範圍(in:)與間距(step:)，適合整數範圍。
顯示最小值(minimumValueLabel:)與最大值(maximumValueLabel:)。
指定事件(onEditingChanged:)處理方式。

// 注意：放在 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))    // ⭐️ 等寬字體

// 注意：放在 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)
}

// 注意：放在 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`

// 注意：放在 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

PreviousSecureField NextSlider label position

Last updated 5 months ago

Was this helpful?