在SwiftUI中更改滑块拇指

Question

在SwiftUI中是否可以像在UIKit中使用UISlider一样更改Slider的滑块？使用UISlider，您只需要执行以下操作： self.setThumbImage(UIImage(named: "Play_black"), for: .normal)

- aFella

---

这个回答解决了你的问题吗？如何在SwiftUI中自定义滑块的蓝线？ - undefined

Answer 1

你可以使用SwiftUI-Introspect实现这一点。

基本上，你只需要从SwiftUI的Slider中访问底层的UISlider，然后在那里进行设置。这比创建自定义滑块或制作可代表的要容易得多。

代码：

struct ContentView: View {
    @State private var value: Double = 0

    var body: some View {
        Slider(value: $value)
            .introspectSlider { slider in
                slider.setThumbImage(UIImage(named: "Play_black"), for: .normal)
            }
    }
}

结果（临时图像）：

- George

Answer 2

您可以在SwiftUI中使用UIKit的appearance来实现此功能。

示例:

struct CustomSlider : View {
    @State private var value : Double = 0
    init() {
        let thumbImage = UIImage(systemName: "circle.fill")
        UISlider.appearance().setThumbImage(thumbImage, for: .normal)
    }
    
    var body: some View {
        Slider(value: $value)
    }
}

- nhatminh

---

你的回答可以通过提供更多支持性信息来改进。请编辑以添加进一步的细节，比如引用或文档，这样其他人就能确认你的答案是否正确。你可以在帮助中心找到关于如何写好回答的更多信息。 - undefined

太棒了！这是一个很好的解决方案，避免使用第三方框架或从头开始构建自定义滑块。谢谢！ - undefined

这真的有效吗？我看到onAppear的解决方案有效，但这个不行。 - undefined

Answer 3

你不能简单地修改SwiftUI中Slider的拇指。 但是，你可以创建一个自定义滑块。 这里有一个例子: https://swiftuirecipes.com/blog/custom-slider-in-swiftui

- user12395631

Answer 4

在iOS 16中遇到了同样的问题。最简单的自定义方法是使用.onAppear修饰符：

Slider(value: $value)
    .onAppear {
        let thumbImage = UIImage(systemName: "circle.fill")
        UISlider.appearance().setThumbImage(thumbImage, for: .normal)
    }

受到启发：https://developer.apple.com/forums/thread/719658 根据soundflix的评论进行更新

警告：这会改变同一视图中的所有滑块！

更明确地说，如果你有一个包含这个.onAppear代码的SampleView，那么SampleView将会影响到包含SampleView的任何视图（以及任何上游和下游的视图！），所以如果你想在应用程序中使用多个滑块样式，请非常小心地使用这个解决方案！

如果你在了解了它的限制之后仍然想使用这段代码，你可能希望将.onAppear移动到最外层的视图中，以更准确地反映它的作用，像这样：

var body: some View {
    VStack {
        Text("\(value1)")
        Slider(value: $value1)
        Text("\(value2)")
        Slider(value: $value2)
     }
    .onAppear {
        let thumbImage = UIImage(systemName: "circle.fill")
        UISlider.appearance().setThumbImage(thumbImage, for: .normal)
    }
}

- NGnear

---

需要注意的是，这个解决方案会改变你的应用中的所有Slider视图。 - undefined

我刚刚做了一个测试，你部分正确。不幸的是，这段代码会改变同一视图中出现的所有控件，这意味着如果你在一个视图中放置了多个具有不同样式的滑块，无论谁先出现，都会成为该视图中滑块的样式。不过，每个视图都可以有自己的样式。 - undefined

在我的测试中，无论在子视图/父视图/祖父视图中声明多少个onAppear，所有滑块都只有一个thumpImage。 - undefined

谢谢soundflix；我现在已经修改了我的答案，更清晰了。这个.onAppear肯定会污染整个视图层次结构（就像你说的子/父/祖父等）；但是，如果你的视图层次结构还没有被这个.onAppear污染，你可以通过创建不同的滑块样式在其中引入不同的污染。我希望能找到一个本地解决方案，不再有这种污染行为... - undefined