JOYNAL ABEDIN

SOFTWARE ENGINEER

Others SwiftUI 

Implement Custom List View in SwiftUI

joynal27 408 Comments , , 
//
//  ContentView.swift
//  CustomListDemo
//
//  Created by Joynal Abedin on 14/2/23.
//

import SwiftUI

struct ListModel: Identifiable {
    let id = UUID()
    let name: String
    let age: Int
    let gender: String
}

struct ContentView: View {
    
    private let values: [ListModel] = [
        ListModel(name: "John", age: 24, gender: "Male"),
        ListModel(name: "Joynal", age: 25, gender: "Male"),
        ListModel(name: "Abedin", age: 25, gender: "Male"),
        ListModel(name: "Maria", age: 22, gender: "Female"),
    ]
    
    var body: some View {
        VStack {
            List(values) { item in
                DesignView(item: item)
                    .listRowSeparator(.hidden)
                    
            }
            .listStyle(.plain)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}


//MARK: - Custom Cell View

struct DesignView: View {
    
    let item: ListModel
    
    var body: some View {
        ZStack {
            RoundedRectangle(cornerRadius: 10.0)
                .fill(Color.white)
                .frame(height: 100)
            
            HStack {
                Text(item.name)
                    .foregroundColor(.black)
                    .font(.body)
                Spacer()
                Text("\(item.age)")
                    .foregroundColor(.black)
                    .font(.subheadline)
                Spacer()
                Text(item.gender)
                    .foregroundColor(.black)
                    .font(.subheadline)
            }
            .padding([.leading, .trailing], 10)
            
            
        }
        .frame(height: 54)
        .cornerRadius(24)
        .shadow(color: Color(uiColor: UIColor(red: 0.081, green: 0.415, blue: 0.775, alpha: 0.13)), radius: 10, x: 0, y: 1)
        
    }
}


//MARK: - Model
struct ListModel: Identifiable {
    let id = UUID()
    let name: String
    let age: Int
    let gender: String
}

You May Also Like

How to Create a CocoadPods Library?

joynal27 119

How to remove Main.storyboard properly in swift?

joynal27 35
Localizable Application

App Localization in Swift

joynal27 222

408 thoughts on “Implement Custom List View in SwiftUI”

Leave a Reply

Your email address will not be published. Required fields are marked *