Info Gempa - Membuat Item List

The Ngoding

Pada tutorial kali ini, kita akan membuat item list pada halaman utama aplikasi

Daftar Isi

Daftar Isi

Spesifikasi APlikasi

Spesifikasi Keterangan
Bahasa Swift 5
Framework SwiftUI
Editor/Tool Xcode 11.3
Platform IOS

setelah selesai membuat list, saatnya kita membuat item list sehingga nampak lebih bagus tampilannya, langkah - langkah nya adalah sebagai berikut :

Langkah - Langkah

  1. Buka Project File temen - temen pada xcode

  2. Klik kanan kemudian New File

    list

  3. Pilih SwiftUI

    list

  4. Beri nama file yang kita buat dengan ItemList

  5. Ganti code nya

    Before

         import SwiftUI
    
       struct ContentView: View {
           var body: some View {
                   Text("Hello, World!")
           }
       }
    
       struct ContentView_Previews: PreviewProvider {
           static var previews: some View {
                   ContentView()
               }
       }
    

    Menjadi seperti ini

    After

         import SwiftUI
    
         struct ItemList: View {
                 var body: some View {
                     HStack(alignment: .center, spacing: 9){
                         VStack(alignment: .leading){
                             Text("4.5")
                                 .foregroundColor(.white)
                                 .font(.headline)
                                 .bold()
                         }.frame(width:100,height:100)
                             .background(Color.green)
                             .clipShape(Circle())
                             .overlay(Circle().stroke(Color.gray,lineWidth: 1))
                             .shadow(radius: 10)
                         VStack{
                             Text("4KM Coba, Coba")
                                 .foregroundColor(.gray)
                                 .bold()
    
                             Text("Time : 25 December 2019")
                                 .italic()
                                 .foregroundColor(.orange)
                                 .padding(.top,2)
                         }
                     }
                 }
             }
    
         struct ContentView_Previews: PreviewProvider {
             static var previews: some View {
                 ItemList()
             }
         }
    
  6. Buka file ContentView.swift dan ganti menjadi seperti ini

    
        import SwiftUI
        struct ContentView: View {
            var body: some View {
                List{
                    ForEach(0...10,id: \.self){ index in
                    ItemList()
                    }
                }
            }
        }
    
        struct ContentView_Previews: PreviewProvider {
            static var previews: some View {
                ContentView()
            }
        }
    
    
  7. Maka tampilannya seperti dibawah ini

    list

Video

The Ngoding

13 Alasan Jetpack Compose Lebih Baik untuk Pengembangan Aplikasi Android

Cong Fandi

Jetpack Compose - Surface

Cong Fandi

Jetpack Compose - CutCornerShape

Cong Fandi

Jetpack Compose - RoundedCornerShape

Cong Fandi

Jetpack Compose - CircleShape

Cong Fandi

Jetpack Compose - ConstraintSet

Cong Fandi

Jetpack Compose - BadgeBox

Cong Fandi

Video

The Ngoding

Tags