swiftui - カスタムSwiftUIビューでテキストフィールドとボタンを設定する方法

Question

openweathermap アプリのテキストフィールドとボタンを、メインコンテンツビュー以外の独自のビューに設定しようとしています。TextFieldView では、ボタンのアクションは API レスポンスを呼び出すように設定されています。次に、応答からの気象データがシートベースの DetailView に取り込まれます。これは、TextFieldView のボタンによってトリガーされます。シートの ForEach メソッドを構成して、WeatherModel 配列に最後に追加された都市 (技術的にはテキストフィールドに入力された最新の都市) を返し、シートベースの DetailView にその都市の気象データを入力します。以前は、テキストフィールド、ボタン、およびシートコントロールを含む HStack を ContentView に設定すると、テキストフィールドに入力したばかりの都市の天気がシートに適切に表示されていました。これらの項目を別の TextFieldView に移動した後、ForEach メソッドは動作を停止したように見えます。代わりに、テキストフィールドに都市名を入力した後に返される天気情報は、間違ったカウントで表示されます。たとえば、テキストフィールドに「ロンドン」と入力すると、シートの DetailView は完全に空白になります。次に、次のエントリとして「Rome」と入力すると、シートの DetailView に前の「London」エントリの天気情報が表示されます。テキストフィールドに「パリ」と入力すると、「ローマ」の天気情報が表示されます... シートの DetailView は完全に空白です。次に、次のエントリとして「Rome」と入力すると、シートの DetailView に前の「London」エントリの天気情報が表示されます。テキストフィールドに「パリ」と入力すると、「ローマ」の天気情報が表示されます... シートの DetailView は完全に空白です。次に、次のエントリとして「Rome」と入力すると、シートの DetailView に前の「London」エントリの天気情報が表示されます。テキストフィールドに「パリ」と入力すると、「ローマ」の天気情報が表示されます...

要約すると、テキストフィールド全体とボタン機能を別のビューに移動した後、シートの ForEach メソッドが正しく動作しなくなりました。私が説明した問題がなぜ起こっているのか分かりますか?

これが私のコードです：

コンテンツビュー

struct ContentView: View {
    // Whenever something in the viewmodel changes, the content view will know to update the UI related elements
    @StateObject var viewModel = WeatherViewModel()
        
    var body: some View {
        NavigationView {
            VStack(alignment: .leading) {
                List {
                    ForEach(viewModel.cityNameList.reversed()) { city in
                        NavigationLink(destination: DetailView(detail: city), label: {
                            Text(city.name).font(.system(size: 18))
                            Spacer()
                            Text("\(city.main.temp, specifier: "%.0f")&deg;")
                                .font(.system(size: 18))
                        })
                    }
                    .onDelete { indexSet in
                        let reversed = Array(viewModel.cityNameList.reversed())
                        let items = Set(indexSet.map { reversed[$0].id })
                        viewModel.cityNameList.removeAll { items.contains($0.id) }
                    }
                }
                .refreshable {
                    viewModel.updatedAll()
                }
                
                TextFieldView(viewModel: viewModel)
                
            }.navigationBarTitle("Weather", displayMode: .inline)
        }
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

TextFieldView

struct TextFieldView: View {
    
    @State private var cityName = ""
    @State private var showingDetail = false
    @FocusState var isInputActive: Bool
    
    var viewModel: WeatherViewModel
    
    var body: some View {
        HStack {
            TextField("Enter City Name", text: $cityName)
                .focused($isInputActive)
            Spacer()
            .toolbar {
                ToolbarItemGroup(placement: .keyboard) {
                    Button("Done") {
                        isInputActive = false
                    }
                }
            }
            if isInputActive == false {
                Button(action: {
                    viewModel.fetchWeather(for: cityName)
                    cityName = ""
                    self.showingDetail.toggle()
                }) {
                    Image(systemName: "plus")
                        .font(.largeTitle)
                        .frame(width: 75, height: 75)
                        .foregroundColor(Color.white)
                        .background(Color(.systemBlue))
                        .clipShape(Circle())
                }
                .sheet(isPresented: $showingDetail) {
                    ForEach(0..<viewModel.cityNameList.count, id: \.self) { city in
                        if (city == viewModel.cityNameList.count-1) {
                            DetailView(detail: viewModel.cityNameList[city])
                        }
                    }
                }
            }
        }
        .frame(minWidth: 100, idealWidth: 150, maxWidth: 500, minHeight: 30, idealHeight: 40, maxHeight: 50, alignment: .leading)
            .padding(.leading, 16)
            .padding(.trailing, 16)
    }
}

struct TextFieldView_Previews: PreviewProvider {
    static var previews: some View {
        TextFieldView(viewModel: WeatherViewModel())
    }
}

詳細ビュー

struct DetailView: View {
    
    @State private var cityName = ""
    @State var selection: Int? = nil
    
    var detail: WeatherModel
        
    var body: some View {
        VStack(spacing: 20) {
            Text(detail.name)
                .font(.system(size: 32))
            Text("\(detail.main.temp, specifier: "%.0f")&deg;")
                .font(.system(size: 44))
            Text(detail.firstWeatherInfo())
                .font(.system(size: 24))
        }
    }
}

struct DetailView_Previews: PreviewProvider {
    static var previews: some View {
        DetailView(detail: WeatherModel.init())
    }
}

ビューモデル

class WeatherViewModel: ObservableObject {
    
    @Published var cityNameList = [WeatherModel]()

    func fetchWeather(for cityName: String) {
        guard let url = URL(string: "https://api.openweathermap.org/data/2.5/weather?q=\(cityName.escaped())&units=imperial&appid=<YourAPIKey>") else { return }

        let task = URLSession.shared.dataTask(with: url) { data, _, error in
            guard let data = data, error == nil else { return }
            do {
                let model = try JSONDecoder().decode(WeatherModel.self, from: data)
                DispatchQueue.main.async {
                    self.addToList(model)
                }
            }
            catch {
                print(error)
            }
        }
        task.resume()
    }
        
    func updatedAll() {
        // keep a copy of all the cities names
        let listOfNames = cityNameList.map{$0.name}
        // fetch the up-to-date weather info
        for city in listOfNames {
            fetchWeather(for: city)
        }
    }
    
    func addToList( _ city: WeatherModel) {
        // if already have this city, just update
        if let ndx = cityNameList.firstIndex(where: {$0.name == city.name}) {
            cityNameList[ndx].main = city.main
            cityNameList[ndx].weather = city.weather
        } else {
            // add a new city
            cityNameList.append(city)
        }
    }
}

モデル

struct WeatherModel: Identifiable, Codable {
    let id = UUID()
    var name: String = ""
    var main: CurrentWeather = CurrentWeather()
    var weather: [WeatherInfo] = []
    
    func firstWeatherInfo() -> String {
        return weather.count > 0 ? weather[0].description : ""
    }
}

struct CurrentWeather: Codable {
    var temp: Double = 0.0
    var humidity = 0
}

struct WeatherInfo: Codable {
    var description: String = ""
}

swiftui - カスタムSwiftUIビューでテキストフィールドとボタンを設定する方法

1 に答える 1

Related

Reference