Quick Guide: Creating a Landscape Card in SwiftUI

( source image: from author)

SwiftUI component called LandscapeCard. This component is designed to display a scrollable list of landscape images with descriptive text. The main elements of the LandscapeCard include the text header, a scrollable view, and individual landscape item cards. Each of these elements will be broken down and explained in detail.

The LandscapeCard Struct

The LandscapeCard struct conforms to the View protocol, making it a SwiftUI view. It contains a body property which defines the view's content.

struct LandscapeCard: View {
    var body: some View {
        Text("LandScape")
            .multilineTextAlignment(.leading)
            .font(.system(size: 28))
            .bold()
            .padding(.vertical, 20)
            .frame(maxWidth: .infinity, alignment: .leading)
            .padding(.leading, 20)
        
        ScrollView {
            VStack(alignment: .leading, spacing: 30) {
                // Content goes here
            }
        }
        .padding(.horizontal, 20)
    }
}

Landscape Item Cards

The landscape item cards are individual elements within the ScrollView that display an image and associated descriptive text. Each card consists of an image, a title, and a subtitle, all grouped together and styled for a cohesive appearance. The structure and styling of these cards ensure that the content is visually appealing and easy to read.

  ScrollView {
            VStack(alignment: .leading,spacing: 30) {
                
                VStack{
                    Image("view1")
                        .resizable()
                        .frame(maxWidth: .infinity, maxHeight: 100)
                    
                    Group {
                        Text("Frosty Winter Scene")
                            .font(.headline)
                            .padding(.top, 8.0)
                        Text("Reksa Mulia")
                            .foregroundStyle(.secondary)
                            .padding(.bottom, 16.0)
                    }
                    .padding(.horizontal)
                }
                .background(Color.gray.quinary)
                .clipShape(RoundedRectangle(cornerRadius: 16.0))
                
                VStack{
                    Image("view2")
                        .resizable()
                        .frame(maxWidth: .infinity, maxHeight: 100)
                    
                    Group {
                        Text("Icy Winter Wonderland")
                            .font(.headline)
                            .padding(.top, 8.0)
                        Text("Faris Kamal")
                            .foregroundStyle(.secondary)
                            .padding(.bottom, 16.0)
                    }
                    .padding(.horizontal)
                }
                .background(Color.gray.quinary)
                .clipShape(RoundedRectangle(cornerRadius: 16.0))
                
                VStack{
                    Image("view3")
                        .resizable()
                        .frame(maxWidth: .infinity, maxHeight: 100)
                    
                    Group {
                        Text("Chilly Winter Vista")
                            .font(.headline)
                            .padding(.top, 8.0)
                        Text("Naufal Adli")
                            .foregroundStyle(.secondary)
                            .padding(.bottom, 16.0)
                    }
                    .padding(.horizontal)
                }
                .background(Color.gray.quinary)
                .clipShape(RoundedRectangle(cornerRadius: 16.0))
            }
            
        }  .padding(.horizontal,20)

Conclusion

By organizing the landscape images and descriptive text into well-designed item cards, the LandscapeCard view provides a structured and aesthetically pleasing way to display a collection of landscapes. This approach leverages SwiftUI's powerful layout and styling capabilities to create a user-friendly and visually attractive component.

Thanks for reading!. Stay tuned for more Android articles by Naufal Adli. which will be coming soon and dont forget to like and follow.this artikel make Hand-crafted & Made with❤️.