在 SwiftUI 中设置切换颜色 [英] Set Toggle color in SwiftUI

问题描述

在遵循 Apple 的

SwiftUI 1.0

使用 ToggleStyle

我创建了一个新的 ToggleStyle 来更改 Toggle 的三种颜色(开色、关色和拇指).

struct ColoredToggleStyle: ToggleStyle {var label = "";var onColor = 颜色(UIColor.green)var offColor = Color(UIColor.systemGray5)var thumbColor = Color.whitefunc makeBody(configuration: Self.Configuration) ->一些视图{堆栈{文字(标签)垫片()按钮(动作:{configuration.isOn.toggle()}){RoundedRectangle(cornerRadius: 16, style: .circular).fill(configuration.isOn ? onColor : offColor).frame(宽:50，高:29).覆盖(圆圈().fill(thumbColor).shadow(半径:1，x:0，y:1).padding(1.5).offset(x: 配置.isOn ? 10 : -10)).animation(Animation.easeInOut(duration: 0.1))}}.font(.title).padding(.水平)}}

使用示例

Toggle("", isOn: $toggleState).toggleStyle(ColoredToggleStyle(标签:我的彩色切换"，onColor: .green,关闭颜色:.红色，拇指颜色:颜色(UIColor.systemTeal)))Toggle("", isOn: $toggleState2).toggleStyle(ColoredToggleStyle(标签:我的彩色切换"，onColor: .purple))

来自 SwiftUI 手册

I've implemented a toggle after following Apple's tutorial on user input. Currently, it looks like this:

This is the code that produces this UI:

NavigationView {
    List {
        Toggle(isOn: $showFavoritesOnly) {
            Text("Show Favorites only")
        }
    }
}

Now, I'd like the Toggle's on-color to be blue instead of green.
I tried:

Toggle(isOn: $showFavoritesOnly) {
    Text("Show Favorites only")
}
.accentColor(.blue)

.foregroundColor(.blue)

.background(Color.blue)

None of these worked and I wasn't able to find any other modifiers, such as tintColor.

How do I change the color of a Toggle?

解决方案

SwiftUI 2.0

Using SwitchToggleStyle

You can now set a tint color for the on position only in SwiftUI 2.0:

Toggle(isOn: $isToggleOn) {
    Text("Red")
    Image(systemName: "paintpalette")
}
.toggleStyle(SwitchToggleStyle(tint: Color.red))

Toggle(isOn: $isToggleOn) {
    Text("Orange")
    Image(systemName: "paintpalette")
}
.toggleStyle(SwitchToggleStyle(tint: Color.orange))

SwiftUI 1.0

Using ToggleStyle

I created a new ToggleStyle to change the three colors of the Toggle (on color, off color, and the thumb).

struct ColoredToggleStyle: ToggleStyle {
    var label = ""
    var onColor = Color(UIColor.green)
    var offColor = Color(UIColor.systemGray5)
    var thumbColor = Color.white
    
    func makeBody(configuration: Self.Configuration) -> some View {
        HStack {
            Text(label)
            Spacer()
            Button(action: { configuration.isOn.toggle() } )
            {
                RoundedRectangle(cornerRadius: 16, style: .circular)
                    .fill(configuration.isOn ? onColor : offColor)
                    .frame(width: 50, height: 29)
                    .overlay(
                        Circle()
                            .fill(thumbColor)
                            .shadow(radius: 1, x: 0, y: 1)
                            .padding(1.5)
                            .offset(x: configuration.isOn ? 10 : -10))
                    .animation(Animation.easeInOut(duration: 0.1))
            }
        }
        .font(.title)
        .padding(.horizontal)
    }
}

Examples of Use

Toggle("", isOn: $toggleState)
    .toggleStyle(
        ColoredToggleStyle(label: "My Colored Toggle",
                           onColor: .green,
                           offColor: .red,
                           thumbColor: Color(UIColor.systemTeal)))

Toggle("", isOn: $toggleState2)
    .toggleStyle(
        ColoredToggleStyle(label: "My Colored Toggle",
                           onColor: .purple))

From the SwiftUI Book

这篇关于在 SwiftUI 中设置切换颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！