【SwiftUI】コピペ用 Swift UIコンポーネント

1. テキスト表示

Text("Hello, SwiftUI!")
    .font(.headline)
    .foregroundColor(.blue)

2. ボタン

Button("Tap me") {
    // ボタンがタップされたときの処理
}
.padding()
.background(Color.blue)
.foregroundColor(.white)
.cornerRadius(10)

3. テキストフィールド

@State private var textInput: String = ""

TextField("Enter text", text: $textInput)
    .textFieldStyle(RoundedBorderTextFieldStyle())
    .padding()

4. リスト

let items = ["Item 1", "Item 2", "Item 3"]

List(items, id: \.self) { item in
    Text(item)
}

5. アラート

@State private var showAlert = false

Button("Show Alert") {
    showAlert = true
}
.alert(isPresented: $showAlert) {
    Alert(title: Text("Alert"), message: Text("This is an alert"), dismissButton: .default(Text("OK")))
}

6. イメージ

Image("imageName")
    .resizable()
    .aspectRatio(contentMode: .fit)
    .frame(width: 100, height: 100)
    .clipShape(Circle())

7. スタックビュー

縦方向のスタックビュー

VStack {
    Text("First Item")
    Text("Second Item")
    Text("Third Item")
}

横方向のスタックビュー

HStack {
    Text("Left Item")
    Spacer()
    Text("Right Item")
}
.padding()

8. グリッド

let gridItems = Array(repeating: GridItem(.flexible()), count: 2)

LazyVGrid(columns: gridItems, spacing: 16) {
    ForEach(0..<10) { index in
        Text("Item \(index)")
            .padding()
            .background(Color.blue)
            .foregroundColor(.white)
            .cornerRadius(8)
    }
}

9. ナビゲーションビュー

NavigationView {
    NavigationLink(destination: Text("Detail View")) {
        Text("Navigate to Detail")
            .padding()
            .background(Color.green)
            .foregroundColor(.white)
            .cornerRadius(8)
    }
    .navigationBarTitle("Main View", displayMode: .inline)
}

10. プログレスバー

ProgressBar(value: 0.7)
    .frame(width: 200)

上記の例で ProgressBar は以下のようなカスタムビューを仮定しています。

struct ProgressBar: View {
    var value: Double
    
    var body: some View {
        GeometryReader { geometry in
            ZStack(alignment: .leading) {
                Rectangle()
                    .frame(width: geometry.size.width, height: 10)
                    .opacity(0.3)
                    .foregroundColor(Color.gray)
                
                Rectangle()
                    .frame(width: min(CGFloat(self.value) * geometry.size.width, geometry.size.width), height: 10)
                    .foregroundColor(Color.blue)
            }
        }
    }
}

11. カスタムモーダル

struct CustomModalView: View {
    var body: some View {
        VStack {
            Text("This is a custom modal")
            Button("Close") {
                // モーダルを閉じる処理
            }
            .padding()
            .background(Color.blue)
            .foregroundColor(.white)
            .cornerRadius(8)
        }
        .padding()
        .background(Color.white)
        .cornerRadius(16)
        .shadow(radius: 5)
    }
}

// メインビューでの呼び出し
struct MainView: View {
    @State private var showModal = false
    
    var body: some View {
        Button("Show Modal") {
            showModal = true
        }
        .sheet(isPresented: $showModal) {
            CustomModalView()
        }
    }
}