ScrollView does not update after loading data. ScrollView successfully displays data only after I switch to another screen and come back.
https://youtu.be/0q3R6LaKbnE
For asynchronous image loading, use: https://github.com/dmytro-anokhin/url-image
import Combine
import SwiftUI
class NewsAPI: ObservableObject {
#Published var articles: Articles = [Article]()
init() {
guard let url: URL = URL(string: "https://newsapi.org/v2/top-headlines?country=ru&apiKey=376a97643c6c4633afe57427b71e8ebd") else { return }
URLSession.shared.dataTask(with: url) { (data, response, error) in
do {
guard let json = data else { return }
let welcome = try JSONDecoder().decode(ModelNews.self, from: json)
DispatchQueue.main.async {
self.articles = welcome.articles!
}
}
catch {
print(error)
}
}
.resume()
}
}
struct CardList: View {
#ObservedObject var newsAPI: NewsAPI = NewsAPI()
var body: some View {
NavigationView {
ScrollView {
VStack(alignment: .center) {
ForEach(self.newsAPI.articles, id: \.self) { i in
CardView(article: i)
I solved the problem. The updating works fine, the problem is something else!
I've struggled for hours to solve this and I've found a solution.
If you provide default values from the same type or a view, which is only shown, when the array is empty, everything is working as it should. Seems like the view have the wrong size, if the array is empty, so you don't see anything, because the size isn't changing with the update of the content.
In short words: Provide a default value or an alternative view, which is shown, if the array is empty.
Hope that helps!
You could test it without the dispatchqueue. I had a similar issue on a list and got it to work when i removed the Dispatchqueue.
Just self.articles = welcome.articles!.
Related
I have a simple view that is using a class to generate a link for the user to share.
This link is generated asynchronously so is run by using the .task modifier.
class SomeClass : ObservableObject {
func getLinkURL() async -> URL {
try? await Task.sleep(for: .seconds(1))
return URL(string:"https://www.apple.com")!
}
}
struct ContentView: View {
#State var showSheet = false
#State var link : URL?
#StateObject var someClass = SomeClass()
var body: some View {
VStack {
Button ("Show Sheet") {
showSheet.toggle()
}
}
.padding()
.sheet(isPresented: $showSheet) {
if let link = link {
ShareLink(item: link)
} else {
HStack {
ProgressView()
Text("Generating Link")
}
}
}.task {
let link = await someClass.getLinkURL()
print ("I got the link",link)
await MainActor.run {
self.link = link
}
}
}
}
I've simplified my actual code to this example which still displays the same behavior.
The task is properly executed when the view appears, and I see the debug print for the link. But when pressing the button to present the sheet the link is nil.
The workaround I found for this is to move the .task modifier to be inside the sheet, but that doesn't make sense to me nor do I understand why that works.
Is this a bug, or am I missing something?
It's because the sheet's closure is created before it is shown and it has captured the old value of the link which was nil. To make it have the latest value, i.e. have a new closure created that uses the new value, then just add it to the capture list, e.g.
.sheet(isPresented: $showSheet) { [link] in
You can learn more about this problem in this answer to a different question. Also, someone who submitted a bug report on this was told by Apple to use the capture list.
By the way, .task is designed to remove the need for state objects for doing async work tied to view lifecycle. Also, you don't need MainActor.run.
I'm having trouble getting all images to show in a List using AsyncImage. When you first run the app, it seems fine but if you start scrolling, some Images aren't shown. Either the ProgressView doesn't update until the row is scrolled outside of the screen and back into view or I get an error Code=-999 "cancelled".
I can get the all the images to show and ProgressView to update correctly using a regular Image View and going through the whole setup process of downloading and showing an image. It's only when I try to use AsyncImage that all the images aren't shown. How can I get all AsyncImages to show in a List?
struct ContentView: View {
#StateObject private var viewModel = ListViewModel()
var body: some View {
List {
ForEach(viewModel.images) { photo in
HStack {
AsyncImage(url: URL(string: photo.thumbnailUrl)) { phase in
switch phase {
case .success(let image):
image
case .failure(let error):
let _ = print(error)
Text("error: \(error.localizedDescription)")
case .empty:
ProgressView()
#unknown default:
fatalError()
}
}
VStack(alignment: .leading) {
Text(photo.title)
Text(photo.thumbnailUrl)
}
}
}
}
.task {
await viewModel.loadImages()
}
}
}
#MainActor
class ListViewModel: ObservableObject {
#Published var images: [PhotoObject] = []
func loadImages() async {
do {
let photos = try await AsyncImageManager.downloadImages()
images = photos
} catch {
print("Could load photos: \(error)")
}
}
}
struct AsyncImageManager {
static func downloadImages() async throws -> [PhotoObject] {
let url = URL(string: "https://jsonplaceholder.typicode.com/photos")!
let (data, _) = try await URLSession.shared.data(from: url)
return try JSONDecoder().decode([PhotoObject].self, from: data)
}
}
struct PhotoObject: Identifiable, Codable {
let albumId: Int
let id: Int
let title: String
let url: String
let thumbnailUrl: String
}
This is still a bug in iOS 16.
The only solution that I found is to use ScrollView + LazyVStack instead of List.
I'm downloading data from Firebase and trying to edit it. It works, but with an issue. I am currently passing data to my EditViewModel with the .onAppear() method of my view. And reading the data from EditViewModel within my view.
class EditViewModel: ObservableObject {
#Published var title: String = ""
}
struct EditView: View {
#State var selected_item: ItemModel
#StateObject var editViewModel = EditViewModel()
var body: some View {
VStack {
TextField("Name of item", text: self.$editViewModel.title)
Divider()
}.onAppear {
DispatchQueue.main.async {
editViewModel.title = selected_item.title
}
}
}
}
I have given you the extremely short-hand version as it's much easier to follow.
However, I push to another view to select options from a list and pop back. As a result, everything is reset due to using the onAppear method. I have spent hours trying to use init() but I am struggling to get my application to even compile, getting errors in the process. I understand it's due to using the .onAppear method, but how can I use init() for this particular view/view-model?
I've search online but I've found the answers to not be useful, or different from what I wish to achieve.
Thank you.
You don't need to use State for input property - it is only for internal view usage. So as far as I understood your scenario, here is a possible solution:
struct EditView: View {
private var selected_item: ItemModel
#StateObject var editViewModel = EditViewModel()
init(selectedItem: ItemModel) {
selected_item = selectedItem
editViewModel.title = selectedItem.title
}
var body: some View {
VStack {
TextField("Name of item", text: self.$editViewModel.title)
Divider()
}.onAppear {
DispatchQueue.main.async {
editViewModel.title = selected_item.title
}
}
}
}
Obtaining the user ID on the viewModel.
The FreeView will dispatch the view depending on whether the userID was obtained or not.
I'm having a problem with ContentView being displayed after EmptyView is displayed if I can get the userID, and I'd like an idea to solve this problem.
If the userID is empty after fetching, EmptyView
If it is not empty, we want to display ContentView.
If it is not empty, EmptyView will be displayed and then ContentView will be displayed.
Here's a sample source code
struct FreeView: View {
#ObservedObject var freeViewViewModel: FreeViewViewModel
var body: some View {
VStack(alignment: .center, spacing: 8) {
if self.freeViewViewModel.userID.isEmpty {
// EmptyView
} else {
// Content View
}
}
}
}
final class FreeViewViewModel: ObservableObject {
#Published var userID: [String] = []
init() {
self.fetchUserID()
}
private func fetchUserID() {
// get userID
}
}
To make ContentView updated make the following
private func fetchUserID() {
// get userID
// ... your fetch request here ...
// ... error response handing here
// in callback of your async fetcher do like the following
guard let fetchedUserId = fetchedUserId else { return }
DispatchQueue.main.async {
self.userID = [fetchedUserId]
}
}
}
I have a view that displays a few photos that are loaded from an API in a scroll view. I want to defer fetching the images until the view is displayed. My view, simplified looks something like this:
struct DetailView : View {
#ObservedObject var viewModel: DetailViewModel
init(viewModel: DetailViewModel) {
self.viewModel = viewModel
}
var body: some View {
GeometryReader { geometry in
ZStack {
Color("peachLight").edgesIgnoringSafeArea(.all)
if self.viewModel.errorMessage != nil {
ErrorView(error: self.viewModel.errorMessage!)
} else if self.viewModel.imageUrls.count == 0 {
VStack {
Text("Loading").foregroundColor(Color("blueDark"))
Text("\(self.viewModel.imageUrls.count)").foregroundColor(Color("blueDark"))
}
} else {
VStack {
UIScrollViewWrapper {
HStack {
ForEach(self.viewModel.imageUrls, id: \.self) { imageUrl in
LoadableImage(url: imageUrl)
.scaledToFill()
}.frame(width: geometry.size.width, height: self.scrollViewHeight)
}.edgesIgnoringSafeArea(.all)
}.frame(width: geometry.size.width, height: self.scrollViewHeight)
Spacer()
}
}
}
}.onAppear(perform: { self.viewModel.fetchDetails() })
.onReceive(viewModel.objectWillChange, perform: {
print("Received new value from view model")
print("\(self.viewModel.imageUrls)")
})
}
}
my view model looks like this:
import Foundation
import Combine
class DetailViewModel : ObservableObject {
#Published var imageUrls: [String] = []
#Published var errorMessage : String?
private var fetcher: Fetchable
private var resourceId : String
init(fetcher: Fetchable, resource: Resource) {
self.resourceId = resource.id
// self.fetchDetails() <-- uncommenting this line results in onReceive being called + a view update
}
// this is a stubbed version of my data fetch that performs the same way as my actual
// data call in regards to ObservableObject updates
// MARK - Data Fetching Stub
func fetchDetails() {
if let path = Bundle.main.path(forResource: "detail", ofType: "json") {
do {
let data = try Data(contentsOf: URL(fileURLWithPath: path), options: .mappedIfSafe)
let parsedData = try JSONDecoder().decode(DetailResponse.self, from: data)
self.imageUrls = parsedData.photos // <-- this doesn't trigger a change, and even manually calling self.objectWillChange.send() here doesn't trigger onReceive/view update
print("setting image urls to \(parsedData.photos)")
} catch {
print("error decoding")
}
}
}
}
If I fetch my data within the init method of my view model, the onReceive block on my view IS called when the #Published imageUrls property is set. However, when I remove the fetch from the init method and call from the view using:
.onAppear(perform: { self.viewModel.fetchDetails() })
the onReceive for viewModel.objectWillChange is NOT called, even though the data is updated. I don't know why this is the case and would really appreciate any help here.
Use instead
.onReceive(viewModel.$imageUrls, perform: { newUrls in
print("Received new value from view model")
print("\(newUrls)")
})
I tested this as I found the same issue, and it seems like only value types can be used with onReceive
use enums, strings, etc.
it doesn't work with reference types because I guess technically a reference type doesn't change reference location and simply points elsewhere when changed? idk haha but ya
as a solution, you can set a viewModel #published property which is like a state enum, make changes to that when you have new data, and then on receive can access that...hope that makes sense, let me know if not