SwiftUI - 使用內建形狀

SwiftUI 支援一些內建形狀，用於開發自定義設計和使用者介面元件。這些形狀易於使用，並且可以以各種樣式、顏色、填充、變換等進行自定義。它們通常用於裁剪內容、建立自定義檢視、元件等。SwiftUI 支援以下內建形狀：

圓形
橢圓形
矩形
圓角矩形
膠囊形

現在讓我們詳細討論每個形狀，然後在本章的最後，我們將使用這些形狀建立一個簡單的單元格。

圓形

我們可以使用 Circle() 建立一個圓形。它在檢視框架的中心建立一個圓形。圓形的半徑是框架長度的一半。預設情況下，圓形是實心的黑色，但我們可以使用各種修飾符（如填充、描邊、框架等）對其進行修改。

語法

以下是語法：

Circle()

示例

import SwiftUI

struct ContentView: View {
   var body: some View {
      // Drawing circle
      Circle().fill(Color.brown).frame(width: 50, height: 50)      
   }
}
#Preview {
   ContentView()
}

輸出

橢圓形

橢圓形是二維的卵形，或者可以說它看起來像一個拉長的圓形。橢圓形的寬度和高度不同。在 SwiftUI 中，我們可以使用 Ellipse() 建立橢圓形。它建立一個位於檢視框架內的橢圓形。我們可以使用修飾符根據需要修改橢圓形。

語法

以下是語法：

Ellipse()

示例

import SwiftUI

struct ContentView: View {
   var body: some View {    
      // Drawing ellipse
      Ellipse().stroke(Color.blue, lineWidth: 8).frame(width: 50, height: 100)      
   }
}
#Preview {
   ContentView()
}

輸出

矩形

矩形是最常用的形狀。因此，我們可以使用 Rectangle() 輕鬆建立矩形。它將矩形對齊在檢視框架內。它支援各種屬性，允許它具有描邊或用作蒙版。

語法

以下是語法：

Rectangle()

示例

import SwiftUI

struct ContentView: View {
   var body: some View {    
      // Drawing rectangle
      Rectangle().fill(Color.blue).frame(width: 100, height: 200)
   }
}
#Preview {
   ContentView()
}

輸出

圓角矩形

SwiftUI 還提供內建的 RoundedRectangle() 來建立圓角矩形形狀。圓角矩形是一個非常有用的形狀，它帶有圓角 (cornerRadius) 和樣式屬性。它用於建立按鈕。

語法

以下是語法：

RoundedRectangle(cornerRadius:CGSize, style: RoundedCornerStyle)

它接受以下引數：

cornerSize: 包含角的半徑。
style: 表示圓角的樣式。

示例

import SwiftUI

struct ContentView: View {
   var body: some View {
      // Drawing rounded rectangle
      RoundedRectangle(cornerRadius: 20, style: .circular)
         .fill(Color.pink)
         .frame(width: 300, height: 200)
   }
}
#Preview {
   ContentView()
}

輸出

膠囊形

SwiftUI 還提供了一個名為 capsule() 的特殊形狀。它是一種藥丸狀或細長的橢圓形，兩端圓潤。它通常用於建立按鈕、徽章和其他 UI 元件。

語法

以下是語法：

Capsule()

示例

import SwiftUI

struct ContentView: View {
   var body: some View {
      // Drawing capsule
      Capsule().fill(Color.pink).frame(width: 300, height: 100)
   }
}
#Preview {
   ContentView()
}

輸出

現在，我們將建立一個佈局來了解這些形狀的實際用途。在這裡，我們將使用形狀（例如 Rectangle() 用於背景，RoundedRectangle() 用於框，Circle() 用於徽標以及 Capsule() 用於按鈕）建立一個登入頁面。

示例

import SwiftUI

struct ContentView: View {
   var body: some View {
      ZStack {
         Rectangle()
            .foregroundColor(.brown)
            .ignoresSafeArea()
         HStack {
            Circle()
               .fill(Color.mint)
               .frame(width: 70, height: 70)
               .overlay(Text("T").font( /*@START_MENU_TOKEN@*/.title /*@END_MENU_TOKEN@*/))
            VStack {
               Text("TutorialsPoint").font(.title)
               HStack {
                  Capsule()
                     .fill(Color.gray)
                     .frame(height: 30)
                     .overlay(Text("Login").font(.headline))

               }.frame(width: 120)
            }
         }.padding()
         .background(Color.white)
         .clipShape(RoundedRectangle(cornerRadius: 50))
      }

   }
}

#Preview {
   ContentView()
}

輸出

列印頁面