SwiftUI 1.0

Question

我正在寻找一种在SwiftUI中删除Toggle标签的方法...

我尝试使用ToggleStyle，但这似乎不是正确的方法：

Toggle(isOn: $isBlinky) {
    Text("DO NOT DISPLAY").color(.red)
}
.toggleStyle(.switch)

由于标签似乎包含在类型本身（struct Toggle<Label>）中，因此可能无法仅单独使用开关...

顺便说一句，如果我先使用Text("")然后再使用scaledToFit()，则开关仍然在右侧，而不是居中...

无论如何，如果有人有主意！

PS：：在等待解决方案时，我包裹了一个很好的旧UISwitch，但这不是主意...

struct Switch : UIViewRepresentable {
    @Binding var isOn : Bool

    func makeUIView(context: Context) -> UISwitch {
        let uiView = UISwitch()
        uiView.addTarget(
            context.coordinator,
            action: #selector(Coordinator.didChange(sender:)),
            for: .valueChanged)

        return uiView
    }

    func updateUIView(_ uiView: UISwitch, context: Context) {
        uiView.isOn = isOn
    }

    // MARK:- Coordinator

    func makeCoordinator() -> Switch.Coordinator {
        return Coordinator(self)
    }

    class Coordinator: NSObject {
        var control: Switch

        init(_ control: Switch) {
            self.control = control
        }

        @objc func didChange(sender: UISwitch) {
            control.isOn = sender.isOn
        }
    }
}

Answer 1

SwiftUI 1.0

使用标签隐藏修饰符隐藏标签/标题

这就是应该怎么做。

Toggle("Turn alarm on", isOn: $isToggleOn)
    .labelsHidden() // Hides the label/title

注意：即使标签是隐藏的，您仍应添加标签以方便访问。

示例：

Answer 2

要自定义Toggle，您可以滚动自己的ToggleStyle。

struct CustomToggleStyle: ToggleStyle {

    func body(configuration: Toggle<Self.Label>) -> Text {
        // Define look and feel for the toggle
        Text("Text toggle (?)")
    }

    typealias Body = Text

}

extension StaticMember where Base: ToggleStyle {

    static var custom: CustomToggleStyle.Member {
        return .init(CustomToggleStyle())
    }

}

并像这样使用它

.toggleStyle(.custom)

这似乎是这样做的方式，但API尚未准备就绪！

configuration并未提供构建切换所需的值。

通过dump添加它，我可以看到它具有一些有用的属性...

SwiftUI.Toggle<SwiftUI.ToggleStyleLabel>
  - label: SwiftUI.ToggleStyleLabel
  - state: SwiftUI.ToggleState.off
  - setOn: (Function)

...但是它们似乎是私人的。

找到更多信息后，我将更新此答案。

Answer 3

由于不是“魔术数字”的忠实拥护者，我倾向于竭尽全力避免出现这些数字。经过大量调试（包括UI测试视图转储）之后，罪魁祸首是SwiftUI的DefaultToggleStyle（）实现。（不存在的）标签为该样式占用的实际空间无法消除，并且如我们所见，必须手动调整。但是，如果创建自定义切换样式，则可以不需要垫片来“调整”切换的位置。关键是要完全消除“自定义切换样式”视图中的标签。然后，您需要为切换的“打开”和“关闭”状态创建视图，并为过渡设置动画。基本上，您必须从头开始重新实现开关控件。

我更新了以下示例，以显示在给定适当图形的情况下如何实现完美对齐。 Capsule和Toggle的确完全对齐。否则，唯一的选择是希望魔术数字不要经常改变。

顺便说一句，默认样式的Switch的大小为57宽和31高。

<div id="videodiv" style="width:500px">

如何在SwiftUI中删除或隐藏Toggle的标签

3 个答案:

SwiftUI 1.0

使用标签隐藏修饰符隐藏标签/标题

示例：