使用本地 JSON 中的键：值更改按钮/标签文本 - SwiftUI

Posted 2023-02-24

【中文标题】使用本地 JSON 中的键：值更改按钮/标签文本 - SwiftUI

【英文标题】：Change button/label text using key:value from local JSON - SwiftUI

【发布时间】：2021-02-06 03:33:25

【问题描述】：

SwiftUI 的新手。当用户按下按钮时，尝试获取 JSON 键：值数组以更新到下一个随机项。让它加载就好了，但按钮什么也没做。尝试制作洗牌功能，但找不到将新值传递到文本区域的方法。还尝试将我的 decodedQuotes 和 quote 变量放入 View 中的 @State vars，但它们在 self 可用之前初始化。

通常可以调用 touchesBegan 并在 Storyboard 中编写一个简单的函数。我可以在这里做类似的事情吗？

var decodedQuotes = Bundle.main.decode([Quote].self, from: "quotes.json")
// parses an array with "quote":"name" pairs
var quote = decodedQuotes.randomElement()!

struct QuoteView: View 
    var body: some View 
        
        Button(action:
            // Need it to update the Text below with a new random item from quote
        )
        HStack 
            VStack 
                HStack(alignment: .center) 
                    Text(quote.quote)
                        .multilineTextAlignment(.center)
                        .padding()
                        .foregroundColor(.black)
                
                HStack 
                    Text("-\(quote.name)")
                        .foregroundColor(.black)
                
            
            
        
        .frame(width: 300, height: 300, alignment: .center)
        .background(Background(isHighlighted: true, shape: Rectangle()))
        .foregroundColor(.blue)
        .padding(4)
        .cornerRadius(20)
    

【参考方案1】：

您与@State 走在正确的轨道上

struct Quote 
    var quote : String
    var name : String


var decodedQuotes = [Quote(quote: "test1", name: "name1"),
                     Quote(quote: "test2", name: "name2"),
                     Quote(quote: "test3", name: "name3"),]

struct QuoteView: View 
    
    @State var quote : Quote? = decodedQuotes.randomElement()
    
    var body: some View 
        Button(action: 
            quote = decodedQuotes.randomElement()
        ) 
            Text("New quote")
        
        
        if let quote = quote 
            HStack 
                VStack 
                    HStack(alignment: .center) 
                        Text(quote.name)
                            .multilineTextAlignment(.center)
                            .padding()
                            .foregroundColor(.black)
                    
                    
                    HStack 
                        Text("-\(quote.name)")
                            .foregroundColor(.black)
                    
                
            
            .frame(width: 300, height: 300, alignment: .center)
            .foregroundColor(.blue)
            .padding(4)
            .cornerRadius(20)
        
    

显然，为了测试，我只是使用了一组预制的Quotes

如果您愿意，您也可以在QuoteView 上创建decodedQuotes 一个@State 属性，并在onAppear 中解码它们

我现在还选择将quote 设为可选。我通过if let quote = quote 行检查它是否可用。如果您在某个时候开始从其他地方加载报价，这应该有点面向未来。

【参考方案2】：

我相信这是当前 SwiftUI 中更好的实现，其中文本实际上在按钮内发生变化。希望对你有帮助>

   import SwiftUI
        
struct Quote 
        var quote : String
        var name : String
    
    
    var decodedQuotes = [Quote(quote: "Title 1", name: "Description 1."),
                         Quote(quote: "Title 2", name: "Second description."),
                         Quote(quote: "Title 3", name: "final item."),]
    
    struct ContentView: View 
        
        @State var quote : Quote? = decodedQuotes.randomElement()
        
        var body: some View 
            Button(action: 
                quote = decodedQuotes.randomElement()
            ) 
                Text("New quote")
                
                
                if let quote = quote 
                    HStack 
                        VStack 
                            VStack(alignment: .center) 
                                Text(quote.quote)
                                    .multilineTextAlignment(.center)
                                    .padding()
                                    .foregroundColor(.blue)
                                Text("-\(quote.name)")
                                    .foregroundColor(.blue)
                            
                            
                            
                        
                    
                    .frame(width: 300, height: 300, alignment: .center)
                    .foregroundColor(.blue)
                    .padding(4)
                    .cornerRadius(20)
                
            
            
        
        
    
        struct ContentView_Previews: PreviewProvider 
            static var previews: some View 
                ContentView()