Info Gempa - Membuat Item List @ Cong Fandi | 2019-12-27T00:07:06+08:00 | 2 minutes read | Update at 2019-12-27T00:07:06+08:00

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


Penulis bukan orang yang paling mampu, hanya ingin berbagi saja. Semoga dapat mengambil manfaat - Penulis

© 2018 - 2021 The Ngoding

Powered by Hugo with theme Dream.

avatar

The NgodingSebuah cita-cita hanyalah mimpi jika tidak tahu cara mewujudkannya