如何更改 SwiftUI 中步進器的背景顏色？

Question

我想更改步進器的背景顏色，但此代碼也更改了文本的背景顏色。 我只想更改步進器的背景顏色。 請指導我解決這個問題。

    HStack {

    Text("Count : ")
        .font(.body)
        .foregroundColor(Color(.blue))

    Spacer()

    Stepper(value: self.$MyViewModel.MyModel.minCounts, in: 5...60) {

     Text("\(String(format: "%.0f",MyViewModel.MyModel.minCounts)) Mins")
         .font(.body)
         .foregroundColor(Color("font"))

    }
    .background(Color("Color1"))
}

Answer 1

您應該將 UIColor 賦予 Color；

Stepper(value: $age, in: 1...60)
        {
            Text("\(String(format: "%.0f",44.456)) Mins")
                .font(.body)
                .foregroundColor(Color("font"))
        }
        .background(Color(UIColor(named: "Color1")!))

您需要解開UIColor(named: "Color1")因為它是一個可選值。 您可以根據需要以不同的方式進行操作。 一種解決方案可能是這樣的；

    let color1: UIColor = UIColor(named: "Color1") ?? .white
    var body: some View {
        HStack{
                Text("Count : ")
                    .font(.body)
                    .foregroundColor(Color(.blue))
        Spacer()
        Stepper(value: $age, in: 1...60)
        {
            Text("\(String(format: "%.0f",44.456)) Mins")
                .font(.body)
                .foregroundColor(Color("font"))
        }
        .background(Color(color1))
        
    }
}

Answer 2

我到達這里時的兩分錢是為了滿足更深層次的需求：完全定制 Stepper。

我搜索了一下，然后我從https://www.hackingwithswift.com/forums/100-days-of-swiftui/custom-stepper-view/13742中找到了一個不錯的提示

我重寫了一些更有用的東西。

代碼如下。

只是幾個注意事項：

• 小心使用雙精度，添加 0.1 20 次不會給出壞 2.. 作為上限.. （使用 Ints 更好，最終替換 Double）
• 我們還可以自定義圖標，但不適用於類似於 Apple 的步進器。

編碼邏輯：使用 2 個按鈕，如果在范圍內，go 向上/向下，綁定將傳播到主視圖。

//  Created by ing.conti on 30/07/22.
//

import SwiftUI

typealias CallBack = ( ()->() )?

struct StepperColors{
    let leftBtnColor: Color
    let rightBtnColor: Color
    let backgroundColor: Color
}

struct ColoredStepper: View {
    
    internal init(
        value: Binding<Double>,
        range: ClosedRange<Double>, step: Double,
        onIncrement: CallBack, onDecrement: CallBack,
        stepperColors: StepperColors) {
            _value = value
            self.range = range
            self.step = step
            self.onIncrement = onIncrement
            self.onDecrement = onDecrement
            self.stepperColors = stepperColors
            
        } // init
    
    @Binding private var value: Double
    private let range: ClosedRange<Double>
    private let step: Double
    private let onIncrement: CallBack
    private let onDecrement: CallBack
    private let stepperColors: StepperColors
        
    
    private func checkValue(){
        if value < range.lowerBound {
            value = range.lowerBound
        } else if value > range.upperBound {
            value = range.upperBound
        }
    }
    

    var body: some View {
            HStack {
                
                Button {
                    decrement()
                } label: {
                    Image(systemName: "minus")
                        .frame(width: 38, height: 35)
                }
                .foregroundColor(stepperColors.leftBtnColor)
                .background(stepperColors.backgroundColor)

                Spacer().frame(width: 2)
                
                Button {
                    increment()
                } label: {
                    Image(systemName: "plus")
                        .frame(width: 44, height: 35) // DONT ask WHY different from previous, apple bug.
                }
                .foregroundColor(stepperColors.rightBtnColor)
                .background(stepperColors.backgroundColor)
            }// HStack
            .clipShape(RoundedRectangle(cornerRadius: 8))
            .onAppear(perform: checkValue)
                       
    }// View
    
    func decrement() {
        if value >= range.lowerBound + step {
            value -= step
            onDecrement?()
        }
    }
    
    func increment() {
        if value + step <= range.upperBound {
            value += step
            onIncrement?()
        }
    }
}


struct ContentView: View {
    @State private var value = 0.1
    
    private let stepperColors = StepperColors(leftBtnColor: .red, rightBtnColor: .green, backgroundColor: .white)
    var body: some View {
        
        VStack{
            ColoredStepper( value: $value, range: 1.0...2.01, step: 0.1,
                           onIncrement: { print("Incremented") },
                            onDecrement: { print("Decremented")},
                            stepperColors: stepperColors )

            let text = "\(value.formatted())"
            Text(text)
            Spacer()

            }
        
    }
    
}