1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Qiita全国学生対抗戦Advent Calendar 2022

Day 25

【SwiftUI】iOS16から登場したPasteButtonについて調べた

Posted at

はじめに

iOS16から追加されたコンポーネントで使ったことがなかったので調べてみました。

基本的な使い方

payloadTypeにはこちらにある型が指定できると思います。
戻り値は指定した型の配列です。

複数の型を取得する方法もありますが、使い方があまり変わらないので今回は省略します。

import SwiftUI

struct ContentView: View {
    @State var text: String = ""
    var body: some View {
        VStack(spacing: 50) {
            TextField(text: $text, axis: .vertical) {
                Text("テキストフィールド")
            }
            .textFieldStyle(.roundedBorder)

            PasteButton(payloadType: String.self) { texts in
                guard let text = texts.first else { return }
                self.text = text
            }
        }
        .padding()
    }
}

simulator_screenshot_EFCFAD35-BD77-4642-8868-88977BAD1BF0.png

カスタマイズ

色を変更する

import SwiftUI

struct ContentView: View {
    @State var text: String = ""
    var body: some View {
        VStack(spacing: 50) {
            TextField(text: $text, axis: .vertical) {
                Text("テキストフィールド")
            }
            .textFieldStyle(.roundedBorder)

            PasteButton(payloadType: String.self) { texts in
                guard let text = texts.first else { return }
                self.text = text
            }
+           .tint(.red)
        }
        .padding()
    }
}

simulator_screenshot_EB237F55-A07D-4D7C-A53E-4250A3E7B5EC

ラベルのスタイル

import SwiftUI

struct ContentView: View {
    @State var text: String = ""
    var body: some View {
        VStack(spacing: 50) {
            TextField(text: $text, axis: .vertical) {
                Text("テキストフィールド")
            }
            .textFieldStyle(.roundedBorder)

            PasteButton(payloadType: String.self) { texts in
                guard let text = texts.first else { return }
                self.text = text
            }
+           .labelStyle(.automatic)
        }
        .padding()
    }
}

titleOnly

simulator_screenshot_E176468A-243C-4533-95CC-A28397A158CA

iconOnly

simulator_screenshot_65B77C36-B72B-48A2-A5B6-4804A5010F5D

titleAndIcon

simulator_screenshot_BD946262-B682-4568-B8B7-1BEC79607754

ボタンの背景

import SwiftUI

struct ContentView: View {
    @State var text: String = ""
    var body: some View {
        VStack(spacing: 50) {
            TextField(text: $text, axis: .vertical) {
                Text("テキストフィールド")
            }
            .textFieldStyle(.roundedBorder)

            PasteButton(payloadType: String.self) { texts in
                guard let text = texts.first else { return }
                self.text = text
            }
+           .buttonBorderShape(.automatic)
        }
        .padding()
    }
}

capsule

simulator_screenshot_E31F5702-B5BF-4376-B359-CAD3419E18F6

roundedRectangle

simulator_screenshot_538AED78-B289-4103-9AA9-F8438AFA6F63

roundedRectangle(radius:)

simulator_screenshot_3CA9DFAB-DBE8-499B-BF7B-23DC5F3A9785

おわり

ちょっとカスタマイズ性が低いかなと思いました。
buttonStyleが使えてもいいのに。。。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?