swift - 如果选择了新按钮,则取消选择所有其他按钮选择
问题描述
我有这个代码:
import SwiftUI
struct PlayButton: View {
@Binding var isClicked: Bool
var body: some View {
Button(action: {
self.isClicked.toggle()
}) {
Image(systemName: isClicked ? "checkmark.circle.fill" : "circle")
}
}
}
struct ContentView: View {
@State private var isPlaying: Bool = false
var players : [String] = ["Crown" , "King" , "Queen" , "Prince"]
var body: some View {
VStack {
ForEach(players, id: \.self) { player in
HStack {
Text(player)
PlayButton(isClicked: $isPlaying)
}
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
如果我选择一个新按钮,我想取消选择所有其他先前选择的按钮。例如,如果我选择 King 并选择 Queen ,则 King 被取消选择。我怎样才能做到这一点
我做了什么。老实说,我无法提出解决方案。
解决方案
我知道这可能看起来需要更多代码来提供答案,但我的假设是您正在尝试制作一个真实世界的应用程序。一个真实世界的应用程序应该是可测试的,所以我的答案来自一个你可以测试你的逻辑与你的 UI 分开的地方。此解决方案允许您使用数据从模型角度驱动视图正在执行的操作。
import SwiftUI
class PlayerModel {
let name: String
var isSelected : Bool = false
init(_ name: String){
self.name = name
}
}
class AppModel: ObservableObject {
let players : [PlayerModel] = [PlayerModel("Crown") , PlayerModel("King") ,PlayerModel("Queen") ,PlayerModel("Prince")]
var activePlayerIndex: Int?
init(){
}
func selectPlayer(_ player: PlayerModel){
players.forEach{
$0.isSelected = false
}
player.isSelected = true
objectWillChange.send()
}
}
struct PlayButton: View {
let isSelected: Bool
let action : ()->Void
var body: some View {
Button(action: {
self.action()
}) {
Image(systemName: isSelected ? "checkmark.circle.fill" : "circle")
}
}
}
struct ContentView: View {
@ObservedObject var model = AppModel()
var body: some View {
VStack {
ForEach(model.players, id: \.name) { player in
HStack {
Text(player.name)
PlayButton(isSelected: player.isSelected, action: { self.model.selectPlayer(player) })
}
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
PlayerView()
}
}
推荐阅读
- javascript - 样式化组件 API - withComponent vs. as
- c - 两个不同字符数组的混淆输出
- javascript - 尝试遍历数组并记住最后一个位置
- spring-webflux - Spring WebFlux:使用混合替换 HTTP 响应的标头流式传输原始 HTTP 响应字符串
- latex - 如何在乳胶中添加标题并修复表格的位置?
- angular - 如何使变量取决于单选按钮绑定值
- jquery - 数据表按自定义值对列进行排序
- r - 带有大数据框的 left_joins 出现莫名其妙的错误
- batch-file - 启动多个 JavaScript 文件并等待它们完成
- jquery - 如果活动链接溢出,则向上滚动 mydiv 到活动链接