Minor Bugs and How to Fix them in SwiftUI: Part I

This part forSwiftUI Error ans Issue

1. Top and bottom separators are hidden on the list

When I'm working in SwiftUI and trying to run an app empty page, in the code using “List” top and bottom separators are still there, after a lot search I’ll find a solution is used “.listRowSeparator(.hidden)”.

• Before
  My code looks like this when still have separators at the top and bottom

Source: Author

Source: Author

• After
  This is how fixing separators, show I add “listRowSeparator” after closing the curly bracket “LazyVStack”.

Source: Author

2. Hide the arrow on the right side

In SwiftUI, NavigationLink is often used to create navigation within an app. However, when using NavigationLink within a List, the arrow on the right side of the cell can be unsightly. To hide this arrow, a custom view can be used in combination with the overlay function.

Use the overlay function to add a NavigationLink to the cell. The destination property of the NavigationLink should be set to the detail view for the news article. To hide the arrow, an empty view is added as the content of the NavigationLink and its opacity is set to zero.

Here is an example of the code before and after adding the overlay function:

// Before
NavigationLink {
    <#code#>
} label: {
    <#code#>
}

// After

CustomCellView(
    imageUrlData: viewModel.firstTopHeadline?.urlToImage,
    textData: viewModel.firstTopHeadline?.title
)
.frame(maxWidth: .infinity)
.padding(EdgeInsets(top: 0, leading: 0, bottom: 24, trailing: 0))
.overlay { // here
    NavigationLink(destination: DetailNewsView(news: article)) { EmptyView()}.opacity(0)
}

By using this method, the arrow on the right side of the cell can be hidden, while still allowing for navigation to the detail view.

3. Warning in model

Actually, this warning occurred when I was creating a model in a SwiftUI project.

This how to fix the warning. and better use enum like this

//before
struct FoodDataModel : Identifiable, Codable{
    let id = UUID()
    let status : Int?
    let data : DataModel?
    
}

//After
struct FoodDataModel : Identifiable, Codable{
    let id: UUID = UUID()
    let status : Int?
    let data : DataModel?
    
    enum CodingKeys: String, CodingKey {
        case id
        case status
        case data
    }
}

Conclusion

I hope this article has been of help to you. practice, and improve your skills. Make you better developers.

Become a better developer with my templates. Your support by purchasing one of my templates would be greatly appreciated. Thank you.

My Swift UI news app template has been sold on the CodeCanyon website.
https://codecanyon.net/item/news-feed-app-using-swiftui/43068768 😄

SwiftUI Components in Page

As an iOS Engineer, I am trying to learn Flutter.