#01 模仿一頁 Netflix畫面

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

原圖、結果展示：

左邊是原始圖片，右邊是用 SwiftUI 模仿出來的畫面

一開始用position做法，後來改用stack排列，用spacer、offset、padding調整。最耗時的是微調各種細節跟間距，但是出來的成果很滿意。

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

重要程式碼：

整個畫面主要是垂直排列，靠左邊

顯示圖片與文字

VStack{
                    VStack(alignment: .leading){// 向左對齊
                        Image("0")
                            .resizable()
                            .scaledToFill()
                            .frame(width: 400, height: 210)
                        Text("魔法公主")
                            .font(.title3)
                            .bold()
                            .padding(.leading,15)
                            .padding(.top,5)
                     }
  }                

水平排列三張圖，等間距排列

HStack{
                            Image("1")
                                .resizable()
                                .scaledToFill()
                                .frame(width: 116, height: 157)
                                .padding(.leading,15)
                                .clipShape(RoundedRectangle(cornerRadius: 5))
                            Spacer()
                            Image("2")
                                .resizable()
                                .scaledToFill()
                                .frame(width: 116, height: 157)
                                .clipShape(RoundedRectangle(cornerRadius: 5))
                            Spacer()
                            Image("3")
                                .resizable()
                                .scaledToFill()
                                .frame(width: 116, height: 157)
                                .padding(.trailing,15)
                                .clipShape(RoundedRectangle(cornerRadius: 5))
                        }

文字太長需要換行的寫法（防止文字被切到）

 Text("中了致命詛咒的王子出發尋找解方，卻涉入一場礦城和山獸神森林間的戰鬥。")
                            .font(.footnote)
                            .padding()
                            .offset(x:-14)
                            .fixedSize(horizontal: false, vertical: true)//文字被切到
                            .padding(.leading,15)

使用SF Symbols 裡的小圖案

VStack{
                                Image(systemName: "hand.thumbsup")
                                    .resizable()
                                    .scaledToFit()
                                    .frame(width: 22, height: 22)
                                    .foregroundColor(Color.white)
                                    .padding(.leading,60)
                                    .padding(.top,13)
                                Text("評分")
                                    .foregroundColor(.gray)
                                    .font(.caption)
                                    .padding(.leading,60)
                                    .padding(.top,5)
                            }

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Github:

我的Github:https://github.com/wenchi1116/hw1