“`swift 将SwiftUI按钮表现得像复选框一样,预览不起作用但实际工作。 “`

huangapple go评论45阅读模式
英文:

Swiftui Button to behave like a checkbox doesn't preview but works

问题

以下是复选框的代码,我不会提供代码翻译,只提供中文翻译部分:

这是我创建的复选框的代码。它在应用程序中运行良好,但在Xcode预览画布中不起作用。也就是说,在预览中点击它时,它不会改变状态。但当我在模拟器中运行应用程序并使用复选框时,它正常工作。有什么想法为什么会这样?

//
//  CheckboxToggle.swift
//
//
//

import SwiftUI

enum CheckboxShape : String {
    case circle = "circle"
    case square = "square"
}

struct Checkbox: View {
    
    @Binding var isChecked:Bool
    var style:CheckboxShape
    @State var action:(Bool)->() = {_ in }
    
    var body: some View {
        Button {
            isChecked.toggle()
            action(isChecked)
        } label: {
            let shape = style.rawValue
            Image(systemName: isChecked ? "checkmark.\(shape).fill" : "\(shape)")
              .resizable()
              .frame(width: 24, height: 24)
              .foregroundColor(isChecked ? .green : .gray)
              .font(.system(size: 20, weight: .regular, design: .default))

        }
        .buttonStyle(PlainButtonStyle())
    }
}

struct Checkbox_Previews: PreviewProvider {
    @State static var isChecked:Bool = false
    // 不确定为什么这个预览不起作用,但在其他视图中正常工作。
    static var previews: some View {
        HStack {
            Checkbox(isChecked: $isChecked, style: .circle)
        }
    }
}

英文:

Here's the code for the Checkbox I created. It works great but in the Xcode preview canvas it doesn't work. As in, in the preview when you click it, it doesn't change. When I use the checkbox in my app and run it in the simulator it works great. Any ideas why this is?

//
//  CheckboxToggle.swift
//  
//
//

import SwiftUI

enum CheckboxShape : String {
    case circle = "circle"
    case square = "square"
}

struct Checkbox: View {
    
    @Binding var isChecked:Bool
    var style:CheckboxShape
    @State var action:(Bool)->() = {_ in }
    
    var body: some View {
        Button {
            isChecked.toggle()
            action(isChecked)
        } label: {
            let shape = style.rawValue
            Image(systemName: isChecked ? "checkmark.\(shape).fill" : "\(shape)")
              .resizable()
              .frame(width: 24, height: 24)
              .foregroundColor(isChecked ? .green : .gray)
              .font(.system(size: 20, weight: .regular, design: .default))

        }
        .buttonStyle(PlainButtonStyle())
    }
}

struct Checkbox_Previews: PreviewProvider {
    @State static var isChecked:Bool = false
    // Not sure why this preview doens't work but the view works in other views fine.
    static var previews: some View {
        HStack {
            Checkbox(isChecked: $isChecked, style: .circle)
        }
    }
}

答案1

得分: 1

SwiftUI的预览不以这种方式工作。

要使Checkbox可交互,请将isChecked声明为@State

@State var isChecked = false

并替换PreviewProvider为

struct Checkbox_Previews: PreviewProvider {
    static var previews: some View {
        Checkbox(style: .circle)
    }
}

如果你想查看两种状态(同时保持@Binding),并且保持Checkbox的正方形外观,添加更多的Checkbox视图并指定常量

struct Checkbox_Previews: PreviewProvider {
    static var previews: some View {
        HStack {
            Checkbox(isChecked: .constant(true), style: .circle)
            Checkbox(isChecked: .constant(false), style: .circle)
            Checkbox(isChecked: .constant(true), style: .square)
            Checkbox(isChecked: .constant(false), style: .square)
        }
    }
}

但是此预览不具有交互性。

英文:

SwiftUI previews don't work this way.

To make Checkbox interactive declare isChecked as @State

@State var isChecked = false

and replace the PreviewProvider with

struct Checkbox_Previews: PreviewProvider {
    static var previews: some View {
        Checkbox(style: .circle)
    }
}

And if you want to see both states (and also the square appearance) and keep the @Binding add more Checkbox views and specify constants

struct Checkbox_Previews: PreviewProvider {
    static var previews: some View {
        HStack {
            Checkbox(isChecked: .constant(true), style: .circle)
            Checkbox(isChecked: .constant(false), style: .circle)
            Checkbox(isChecked: .constant(true), style: .square)
            Checkbox(isChecked: .constant(false), style: .square)
        }
    }
}

But this preview is not interactive.

huangapple
  • 本文由 发表于 2023年2月19日 05:37:15
  • 转载请务必保留本文链接:https://go.coder-hub.com/75496542.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定