如何更改 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()

            }
        
    }
    
}