在按照Apple的用户输入教程后，我已经实现了一个切换开关。目前，它看起来是这样的：
这是生成此UI的代码：
NavigationView {
List {
Toggle(isOn: $showFavoritesOnly) {
Text("Show Favorites only")
}
}
}
现在，我希望Toggle的on颜色变为蓝色而不是绿色。
我尝试过：
Toggle(isOn: $showFavoritesOnly) {
Text("Show Favorites only")
}
.accentColor(.blue)
.foregroundColor(.blue)
.background(Color.blue)
这些方法都无法奏效，我也找不到其他的修改器，例如tintColor。
我该如何改变一个Toggle的颜色？
引入了一个新的修饰符，可以改变开关的颜色：
Toggle(isOn: $isToggleOn) {
Text("Red")
Image(systemName: "paintpalette")
}
.tint(.red)
Toggle(isOn: $isToggleOn) {
Text("Orange")
Image(systemName: "paintpalette")
}
.tint(.orange)
在 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))
我创建了一个新的ToggleStyle，来改变Toggle的三种颜色（开启状态的颜色，关闭状态的颜色和拇指的颜色）。
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)
}
}
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))
ToggleStyleConfiguration 中是否有任何更改，但在 HStack 中，您可以直接使用 configuration.label 而不是使用 Text(label)。 - Saurabh Prajapati只需使用UIAppearanceAPI：
UISwitch.appearance().onTintColor = UIColor.blue
根据UIAppearance文档，它当然会默认更改所有UISwitch的实例外观。
注意：在Xcode 11 beta 5中测试通过。
使用新的 SwiftUI 增强功能，您可以使用 .toggleStyle 修改器。
// Switch tinting
Toggle(isOn: $order.notifyWhenReady) {
Text("Send notification when ready")
}
.toggleStyle(SwitchToggleStyle(tint: .accentColor))
注意：此功能仅适用于 iOS14/iPadOS14/macOS11 及以上版本。
我还没有找到直接更改Toggle颜色的方法，但实现一个蓝色开关或是其他自定义视图的替代方法是创建你自己的自定义视图。简单来说，要创建一个自定义的蓝色开关：
struct BlueToggle : UIViewRepresentable {
func makeUIView(context: Context) -> UISwitch {
UISwitch()
}
func updateUIView(_ uiView: UISwitch, context: Context) {
uiView.onTintColor = UIColor.blue
}
}
struct ContentView : View {
var body: some View {
BlueToggle()
}
}
结果：
Toggle有相同的初始化方式init(isOn: Binding<Bool>, label: () -> Label)？ - LinusGeffarthUIViewControllerRepresentable，但不确定。查看此示例：https://developer.apple.com/tutorials/swiftui/interfacing-with-uikit ，虽然它不完全是您所要求的，但这是处理自定义视图的更复杂的方式！ - M Reza@State var enable_dhcp = true
init()
{
UISwitch.appearance().onTintColor = .red
}
var body: some View
{
Toggle("DHCP", isOn: $enable_dhcp)
}
在@mohammad-reza-farahani的解决方案基础上，这里提供了一种完全不妥协的方法，可以在SwiftUI中使用实现协议来获得UISwitch的可配置性。
首先，在UIViewRepresentable中包装一个UISwitch ，并根据需要设置颜色：
final class CustomToggleWrapper: UIViewRepresentable {
var isOn: Binding<Bool>
init(isOn: Binding<Bool>) {
self.isOn = isOn
}
func makeUIView(context: Context) -> UISwitch {
UISwitch()
}
func updateUIView(_ uiView: UISwitch, context: Context) {
// On color
uiView.onTintColor = UIColor.blue
// Off color
uiView.tintColor = UIColor.red
uiView.layer.cornerRadius = uiView.frame.height / 2
uiView.backgroundColor = UIColor.red
uiView.isOn = isOn.wrappedValue
// Update bound boolean
uiView.addTarget(self, action: #selector(switchIsChanged(_:)), for: .valueChanged)
}
@objc
func switchIsChanged(_ sender: UISwitch) {
isOn.wrappedValue = sender.isOn
}
}
UISwitch创建一个自定义切换样式：struct CustomToggleStyle: ToggleStyle {
func makeBody(configuration: Self.Configuration) -> some View {
let toggle = CustomToggleWrapper(isOn: configuration.$isOn)
return HStack {
configuration.label
Spacer()
toggle
}
}
}
按照您通常的方式实现一个 Toggle，并应用您的 CustomToggleStyle：
struct TestView: View {
@State private var isOn: Bool = true
var body: some View {
Toggle(
isOn: $isOn
) {
Text("Test: \(String(isOn))")
}.toggleStyle(CustomToggleStyle()).padding()
}
}
updateUIView函数中使用uiView.setOn(isOn.wrappedValue, animated: context.transaction.animation != nil && !context.transaction.disablesAnimations)来实现动画效果。 - Matthewstruct上使用UIViewRepresentable而不是class，崩溃将发生在运行时。 - L NUISwitch.appearance().onTintColor = .blue
您还可以使用
CSS创建更具体的外观配置。
appearance(whenContainedInInstancesOf:)
Toggle(isOn: $isToggleOn) {
Text("Toggle")
}.tint(.red)
在iOS 15.0以下版本中，您可以使用toggleStyle修饰符来更改切换颜色，但这种方法将在未来被弃用。
Toggle(isOn: $isToggleOn) {
Text("Toggle")
}.toggleStyle(SwitchToggleStyle(tint: .red))
UISwitch.appearance().onTintColor = UIColor.red，然后像下面这样使用SwiftUI Toggle。UISwitch.appearance().onTintColor = UIColor.red
...
let toggle = Toggle(isOn: $vm.dataUsePermission, label: {
Text(I18N.permit_data_usage)
.font(SwiftUI.Font.system(size: 16, weight: .regular))
})
if #available(iOS 14.0, *) {
toggle.toggleStyle(
SwitchToggleStyle(tint: Color(UIColor.m.blue500))
)
} else {
toggle.toggleStyle(SwitchToggleStyle())
}
...
TintableSwitch(isOn: .constant(true), label: {
Text("Switch")
})
Toggle(isOn: .constant(true), label: {
Text("Switch")
})
如果只需要开关而无需标签，则
TintableUISwitch(isOn: .constant(true))
使用以下代码。
import SwiftUI
public struct TintableSwitch<Label>: View where Label: View {
@Binding var isOn: Bool
var label: Label
public init(isOn: Binding<Bool>, @ViewBuilder label: () -> Label) {
self._isOn = isOn
self.label = label()
}
public var body: some View {
HStack {
label
Spacer()
TintableUISwitch(isOn: $isOn, onTintColor: .red) // CHANGE HERE
}
}
}
public struct TintableUISwitch: UIViewRepresentable {
@Binding var isOn: Bool
private var onTintColor: UIColor
public init(isOn: Binding<Bool>, onTintColor: UIColor = UIColor.m.blue500) {
self._isOn = isOn
self.onTintColor = onTintColor
}
public func makeUIView(context: Context) -> UISwitch {
let uiSwitch = UISwitch()
uiSwitch.addTarget(
context.coordinator,
action: #selector(Coordinator.valueChanged(_:)),
for: .valueChanged
)
uiSwitch.onTintColor = onTintColor
uiSwitch.isOn = isOn
return uiSwitch
}
public func updateUIView(_ uiView: UISwitch, context: Context) {
uiView.isOn = isOn
}
public func makeCoordinator() -> Coordinator {
Coordinator(self)
}
public class Coordinator: NSObject {
var tintableSwitch: TintableUISwitch
init(_ tintableSwitch: TintableUISwitch) {
self.tintableSwitch = tintableSwitch
}
@objc
func valueChanged(_ sender: UISwitch) {
tintableSwitch.isOn = sender.isOn
}
}
}
struct TintableSwitch_Previews: PreviewProvider {
static var previews: some View {
VStack {
TintableSwitch(isOn: .constant(true), label: {
Text("Switch")
})
Toggle(isOn: .constant(true), label: {
Text("Switch")
})
}
}
}
struct TintableUISwitch_Previews: PreviewProvider {
static var previews: some View {
TintableUISwitch(isOn: .constant(true))
}
}
由于原始问题仅涉及更改切换开关的颜色，而不是完全自定义 Toggle 外观，因此我认为以下内容可以解决：
import SwiftUI
struct CustomToggle: UIViewRepresentable {
@Binding var isOn: Bool
func makeCoordinator() -> CustomToggle.Coordinator {
Coordinator(isOn: $isOn)
}
func makeUIView(context: Context) -> UISwitch {
let view = UISwitch()
view.onTintColor = UIColor.red
view.addTarget(context.coordinator, action: #selector(Coordinator.switchIsChanged(_:)), for: .valueChanged)
return view
}
func updateUIView(_ uiView: UISwitch, context: Context) {
uiView.isOn = isOn
}
class Coordinator: NSObject {
@Binding private var isOn: Bool
init(isOn: Binding<Bool>) {
_isOn = isOn
}
@objc func switchIsChanged(_ sender: UISwitch) {
_isOn.wrappedValue = sender.isOn
}
}
}
// MARK: - Previews
struct CustomToggle_Previews: PreviewProvider {
static var previews: some View {
ViewWrapper()
}
struct ViewWrapper: View {
@State(initialValue: false) var isOn: Bool
var body: some View {
CustomToggle(isOn: $isOn)
.previewLayout(.fixed(width: 100, height: 100))
}
}
}
.accentColor修改。我已经提交了 FB6158727，如果 Apple 有回应的话我会告诉你的。 :) - Clifton Labrum.accentColor生效。 - Spencer Connaughton