[SwiftUI]TextFieldの右側に画像を表示するには？

どうも、ちょげ(@chogetarou)です。

TextFieldの右側に画像を表示する方法を紹介します。

方法

TextFieldの右側に画像を表示するには、HStackを使います。

まず、TextFieldをHStackの中に入れます。

そして、TextFieldの後にImageを指定します。

HStack {
    TextField("", text: $editingText)
    Image(/*画像*/)
}

枠線がある場合は、最後に、HStackにoverlayを使って枠線をつけます。

HStack {
    TextField("", text: $editingText)
    Image(/*画像*/)
}
.overlay(
    RoundedRectangle(cornerRadius: /*枠線の丸み*/)
        .stroke(/*枠線の色*/, lineWidth: /*枠線の太さ*/)
)

HStackを使えば、TextFieldの右側に画像を表示することができます。

また、枠線をつける場合は、HStackにつけます。

使用例

以下は、使用例です。

struct ContentView: View {
    @State var editingText = ""
    var body: some View {
        HStack{
            TextField("Your Text", text: $editingText)
            Image(systemName:"clear")
        }
        .padding()
        .overlay(
            RoundedRectangle(cornerRadius: 8)
                .stroke(Color.blue, lineWidth: 1)
        )
        .padding()
    }
}

[SwiftUI]TextFieldの背景色を設定するには？

TextFieldの背景色を設定する方法を紹介します。

www.choge-blog.com

2022.01.29

[SwiftUI]TextFieldのテキストを中央寄せにするには？

TextFieldで入力した文字を中央に寄せて表示する方法を紹介します。

www.choge-blog.com

2022.01.29

[SwiftUI]TextFieldにクリアボタンを追加するには？

TextFieldのテキストを全消去するクリアボタンを追加する方法を紹介します。

www.choge-blog.com

2022.01.28

[SwiftUI]TextFieldの文字を自動で大文字にするには？

TextFieldで入力した文字を自動で大文字にする方法を紹介します。

www.choge-blog.com

2022.01.27

おまけ

おまけにモディファイアを使った例を載せておきます。

struct ContentView: View {
    @State var editingText = ""
    var body: some View {
        VStack {
            TextField("Your Text", text: $editingText)
                .modifier(ImageTextFieldModifier(imageName: "clear"))
                .overlay(
                    RoundedRectangle(cornerRadius: 5)
                        .stroke(Color.blue, lineWidth: 1)
                )
                .padding()
        }
    }
}

struct ImageTextFieldModifier : ViewModifier {
    var imageName : String
    func body(content: Content) -> some View {
        HStack {
            content
            Image(systemName: imageName)
        }
        .padding()
    }
}