排版

用 VStack, HStack, ZStack, Spacer 排版。

重點

排版用： VStack, HStack, ZStack, Spacer
設定「字型級距」： text.font()
設定「字體粗細」： text.fontWeight()
讓圖片大小「隨外框調整」： image.resizable()
讓圖片「保持原比例」： .aspectRatio(contentMode:)
設定 view 的「內容對齊方式」： .frame(alignment:)
要讓一個 view 爭取「最大的可用空間」，可用： .frame(maxWidth: .infinity, maxHeight: .infinity) 這通常用在本來是一個 pull-in 的 view (如：VStack)，如果本來就是一個 push-out 的 view (如：Rectangle) ，則不需做此設定。

注意：不要寫成 frame(width: .infinity, height: .infinity) 否則會當掉！

將 view 「裁剪成某個形狀」： .clipShape()
幫 view 「剪圓角」： .cornerRadius()

注意：用 .clipShape() 與 .cornerRadius() 之前，不要用 .shadow() 之類的東西，否則一樣會被裁掉。

/*
 Design+Code - SwiftUI for iOS 13
 https://designcode.io/swiftui-layout-and-stacks
 */

import SwiftUI
import PlaygroundSupport

struct Card: View {
    var body: some View {
        // 卡片最外框
        VStack(spacing: 0) {
            // 卡片標題區：UIDesign & Swift logo
            HStack {
                // 文字區塊
                VStack(alignment: .leading) {   // 讓所有文字「靠左對齊」
                    Text("UI Design")
                        .font(.title)           // 字體加大
                        .fontWeight(.semibold)  // 字體加粗
                    Text("Certificate")
                        .foregroundColor(.blue)
                }
                
                Spacer()                        // 將「文字區塊」與「Swift 商標」推向兩側
                    
                // Swift 商標圖
                Image(uiImage:  imageLiteral(resourceName: "swift.png"))
                    .resizable()                  // 讓圖的大小「隨外框調整」（而不是用原尺寸）
                    .clipShape(Circle())          // 將圖修為「圓形」
                    .frame(width: 40, height: 40) // 限制尺寸為 40x40
                
            } // 卡片標題區
                .padding(.horizontal, 20)         // 左右留白 20
                .padding(.top, 20)                // 上面留白 20
                
            // 卡片設計圖
            Image(uiImage:  imageLiteral(resourceName: "UNESCO.png"))
                .resizable()                      // 讓圖的大小「隨外框調整」（而不是用原尺寸）
                .aspectRatio(contentMode: .fill)  // 讓圖片「保持原比例」⭐️
                // ⭐️ 設定圖片大小，並讓圖片「靠上緣對齊」（而不是預設的「置中」）
                .frame(width: 300, height: 140, alignment: .top)
            
        } // 卡片最外框
            // ⭐️ 讓卡片內容「靠上緣對齊」（而不是預設的「置中」）
            .frame(width: 340, height: 220, alignment: .top)
            .background(Color.black)
            .cornerRadius(20)                     // 將卡片「裁成圓角」
    }
}

struct ContentView: View {
    var body: some View {
        VStack {
            Card()
        } //
            // 讓外框自動採用「最大的寬度與高度」（而不是採用最小的）
            // ⚠️ 注意：
            //    不要寫成 `frame(width: .infinity, height: .infinity)` 
            //    否則會當掉！
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(Color.gray)
    }
}

PlaygroundPage.current.setLiveView(ContentView())

Previous設計卡片 📚Next元件化

Last updated 4 years ago

重點

排版用： VStack, HStack, ZStack, Spacer

設定「字型級距」： text.font()

設定「字體粗細」： text.fontWeight()

讓圖片大小「隨外框調整」： image.resizable()

讓圖片「保持原比例」： .aspectRatio(contentMode:)

設定 view 的「內容對齊方式」： .frame(alignment:)

要讓一個 view 爭取「最大的可用空間」，可用： .frame(maxWidth: .infinity, maxHeight: .infinity) 這通常用在本來是一個 pull-in 的 view (如：VStack)，如果本來就是一個 push-out 的 view (如：Rectangle) ，則不需做此設定。

注意：不要寫成 frame(width: .infinity, height: .infinity) 否則會當掉！

將 view 「裁剪成某個形狀」： .clipShape()

幫 view 「剪圓角」： .cornerRadius()

注意：用 .clipShape() 與 .cornerRadius() 之前，不要用 .shadow() 之類的東西，否則一樣會被裁掉。

/*
 Design+Code - SwiftUI for iOS 13
 https://designcode.io/swiftui-layout-and-stacks
 */

import SwiftUI
import PlaygroundSupport

struct Card: View {
    var body: some View {
        // 卡片最外框
        VStack(spacing: 0) {
            // 卡片標題區：UIDesign & Swift logo
            HStack {
                // 文字區塊
                VStack(alignment: .leading) {   // 讓所有文字「靠左對齊」
                    Text("UI Design")
                        .font(.title)           // 字體加大
                        .fontWeight(.semibold)  // 字體加粗
                    Text("Certificate")
                        .foregroundColor(.blue)
                }
                
                Spacer()                        // 將「文字區塊」與「Swift 商標」推向兩側
                    
                // Swift 商標圖
                Image(uiImage:  imageLiteral(resourceName: "swift.png"))
                    .resizable()                  // 讓圖的大小「隨外框調整」（而不是用原尺寸）
                    .clipShape(Circle())          // 將圖修為「圓形」
                    .frame(width: 40, height: 40) // 限制尺寸為 40x40
                
            } // 卡片標題區
                .padding(.horizontal, 20)         // 左右留白 20
                .padding(.top, 20)                // 上面留白 20
                
            // 卡片設計圖
            Image(uiImage:  imageLiteral(resourceName: "UNESCO.png"))
                .resizable()                      // 讓圖的大小「隨外框調整」（而不是用原尺寸）
                .aspectRatio(contentMode: .fill)  // 讓圖片「保持原比例」⭐️
                // ⭐️ 設定圖片大小，並讓圖片「靠上緣對齊」（而不是預設的「置中」）
                .frame(width: 300, height: 140, alignment: .top)
            
        } // 卡片最外框
            // ⭐️ 讓卡片內容「靠上緣對齊」（而不是預設的「置中」）
            .frame(width: 340, height: 220, alignment: .top)
            .background(Color.black)
            .cornerRadius(20)                     // 將卡片「裁成圓角」
    }
}

struct ContentView: View {
    var body: some View {
        VStack {
            Card()
        } //
            // 讓外框自動採用「最大的寬度與高度」（而不是採用最小的）
            // ⚠️ 注意：
            //    不要寫成 `frame(width: .infinity, height: .infinity)` 
            //    否則會當掉！
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(Color.gray)
    }
}

PlaygroundPage.current.setLiveView(ContentView())