如何在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"))
}

- davede3103

---

你不能只是给Text元素添加.background吗？有点烦人的是，父容器上的修饰符也会影响子元素，但根据SwiftUI教程，预期您会执行像添加修饰符以取消子元素上的动画等操作。 - Rickard Elimää

谢谢您的回复。但我不想要“Text”的背景。 - davede3103

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))
        
    }
}

- musakokcen

---

谢谢您的建议，但我遇到了一个错误。请检查我编辑后的问题。 - davede3103

你需要解包颜色，因为不确定 UIColor(named: "Color1") 是否存在，它是可选的。 - musakokcen

谢谢，现在错误已经消失了。但是步进电机的原始颜色（灰色）仍然有点显示出来。因为我使用浅色作为背景。你有什么想法来解决这个问题吗？ - davede3103

看起来你只能给 .backgroundColor 和 .foregroundColor 赋值。+ 和 - 按钮的背景颜色保持不变。 - musakokcen

Answer 2

我来这里的主要目的是深入定制Stepper组件，以下是我的建议：

我进行了一些搜索，并在https://www.hackingwithswift.com/forums/100-days-of-swiftui/custom-stepper-view/13742上找到了一个不错的提示。

我稍微改进了一下，代码如下。

以下是几点注意事项：

• 使用Double类型时需要小心，添加0.1 20次并不能得到2作为上限（最好使用Int类型，必要时替换Double）
• 我们也可以自定义图标，但不能用于类似Apple Stepper的组件。

编码逻辑：使用两个按钮，如果在范围内，则向上/向下移动，绑定将传播到主视图。

//  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()

            }
        
    }
    
}
  

- ingconti