SwiftUI 和 Flutter時代編程將成為一個有品位的工作，為此特開辟新板塊，用于顯示SwiftUI制作的界面demo，供大家賞鑒。

功能

• List
• Grid自動布局
• 分割數組
• 自定義Cell

效果

單數效果

偶數效果

代碼

import SwiftUI

struct ContentView : View {
    
    let dishes = Dish.all()
    
    var body: some View {
        
        let chunkedDishes = dishes.chunked(into: 3)
        
        return List {
            
            // rows
            ForEach(0..<chunkedDishes.count) { index in
                
                HStack {
                    
                    ForEach(chunkedDishes[index]) { dish in
                        
                        Image(dish.imageURL)
                            .resizable()
                           // .frame(width: 150, height: 150)
                            .scaledToFit()
                        
                    }
                    
                }
                
            }
            
        }
        
    }
}

如何分割數組呢

import Foundation
import SwiftUI

struct Dish: Identifiable {
    
    let id = UUID()
    let name: String
    let price: Double
    let imageURL: String
    
}

extension Dish {
    
    static func all() -> [Dish] {
        
        return [
            Dish(name: "han-shi-tie01-640x350", price: 35, imageURL: "han-shi-tie01-640x350"),
            Dish(name: "han-shi-tie02-640x350s", price: 12, imageURL: "han-shi-tie02-640x350"),
            Dish(name: "han-shi-tie03-640x350", price: 12, imageURL: "han-shi-tie03-640x350"),
            Dish(name: "han-shi-tie04-640x350", price: 15, imageURL: "han-shi-tie04-640x350"),
            Dish(name: "han-shi-tie05-640x350", price: 8, imageURL: "han-shi-tie05-640x350"),
            Dish(name: "han-shi-tie06-640x350", price: 10, imageURL: "han-shi-tie06-640x350"),
            Dish(name: "han-shi-tie07-640x350", price: 12, imageURL: "han-shi-tie07-640x350")
         //    Dish(name: "han-shi-tie07-640x350", price: 12, imageURL: "han-shi-tie07-640x350")
            
        ]
        
    }
    
}

import Foundation


extension Array {
    func chunked(into size: Int) -> [[Element]] {
        return stride(from: 0, to: count, by: size).map {
            Array(self[$0 ..< Swift.min($0 + size, count)])
        }
    }
}

參考資料

https://www.hackingwithswift.com/example-code/language/how-to-split-an-array-into-chunks

更多SwiftUI教程和代碼關注專欄

• 請關注我的專欄icloudend, SwiftUI教程與源碼
  https://www.jianshu.com/c/7b3e3b671970