将按钮变成选择器

Question

我有这段代码，其中有三个按钮，每个按钮都存储有值。

当我按下 Add 按钮时，这些值相加并出现在列表中。但是，我无法检查正在 selected 的值。

如何使按钮看起来像一个选择器，以便当用户单击按钮 A、B 或 C 时，它会显示一个复选标记它已被 selected 并且当用户点击 Add 按钮时，selected 按钮和 "gp" 的值应该显示在列表中？此外，一旦 Add 按钮被 select 选中，复选标记就会消失，这样用户就可以 select 另一个列表。

如：

如果 A 和 B 是 selected，列表应该如下所示：

A = 2.0, B = 5.0, gp = 7.0.

如果 A 和 C 被 selected，列表应该如下所示：

A= 2.0, C = 7.0, gp = 9.0.

我试过用Picker等方法，但是还是打不通。我发现这是最好的解决方案。但是，我无法在按钮上打勾，也无法在列表中显示 selected 值。

import SwiftUI

struct MainView: View {

    @State var br = Double()
    @State var loadpay = Double()
    @State var gp : Double = 0
    @State var count: Int = 1
    @State var listcheck = Bool()
    @StateObject var taskStore = TaskStore()
    @State var a = 2.0
    @State var b = 5.0
    @State var c = 7.0
   
    //var userCasual = UserDefaults.standard.value(forKey: "userCasual") as? String ?? ""
    @State var name = String()
   
    func addNewToDo() {
       taskStore.tasks.append(Task(id: String(taskStore.tasks.count + 1), toDoItem:  "load \(gp)", amount: Double(gp)))
       self.gp = 0.0
    }

    func stepcount() {
       count += 1
    }

    var body: some View {
        HStack {
            Button(action: { gp += a }) {
               Text("A =").frame(width: 70, height: 15)
                  .foregroundColor(.yellow)
            }  
            .background(RoundedRectangle(cornerRadius: 5))
            .foregroundColor(.black)

            Button(action: { gp += b }) {
               Text("B =") .frame(width: 70, height: 15)
                  .foregroundColor(.yellow)
            }
            .background(RoundedRectangle(cornerRadius: 5))
            .foregroundColor(.black)

            Button(action: { gp += c }) {
               Text("C =").frame(width: 70, height: 15)
                  .foregroundColor(.yellow)
             }
             .background(RoundedRectangle(cornerRadius: 5))
             .foregroundColor(.black)
        }

        HStack(spacing: 15) { 
           Button(
              String(format: ""), 
              action: { 
                 print("pay for the shift is ")
                 gp += loadpay
              }
           )

           Button(
              action: {
                 addNewToDo()
                 stepcount()
              },  
              label: { Text("Add")}
           )
        }

     Form {
        ForEach(self.taskStore.tasks) { task in
            Text(task.toDoItem)
        }
     }
   }
}

struct Task : Codable, Identifiable {
    var id = ""
    var toDoItem = ""
    var amount = 0.0
}

class TaskStore : ObservableObject {
    @Published var tasks = [Task]()
}

Answer 1

问题是您正试图将 Button 变成它不是的东西。您可以创建自己的视图来响应点击并保持其状态，以便它知道当前是否被选中。一个例子是这样的：

struct MultiPickerView: View {
    
    @State private var selectA = false
    @State private var selectB = false
    @State private var selectC = false
    
    let A = 2.0
    let B = 5.0
    let C = 7.0
    
    var gp: Double {
        (selectA ? A : 0) + (selectB ? B : 0) + (selectC ? C : 0)
    }
    
    var body: some View {
        VStack {
            HStack {
                SelectionButton(title: "A", selection: $selectA)
                SelectionButton(title: "B", selection: $selectB)
                SelectionButton(title: "C", selection: $selectC)
            }
            .foregroundColor(.blue)
            Text(gp.description)
                .padding()
        }
    }
}

struct SelectionButton: View {

    let title: String
    @Binding var selection: Bool
    
    var body: some View {
        HStack {
            Image(systemName: selection ? "checkmark.circle" : "circle")
            Text(title)
        }
        .padding()
        .overlay(
            RoundedRectangle(cornerRadius: 15)
                .stroke(Color.blue, lineWidth: 4)
        )
        .padding()
        .onTapGesture {
            selection.toggle()
        }

    }
}

您可以通过使用具有保持值和选定状态的结构的 Array 和运行它通过 ForEach 使其更具适应性，但这是逻辑基础。

将按钮变成选择器

Turn Button into Picker

swift

xcode

swiftui