0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Swift UI のButtons基礎の使い方を説明しました!

Posted at

アプリ開発で「ボタン」はユーザーの操作を受け取る重要なUIパーツです。
SwiftUIでは、シンプルで直感的なコードで Button を実装できます。

1.一番基本的なボタンの書き方

import SwiftUI

struct ContentView: View {
    var body: some View {
        Button("押す") {
            print("ボタンが押されました")
        }
    }
}

2.ボタンの見た目をカスタマイズする

Button(action: {
    print("カスタムボタン")
}) {
    Text("カスタムボタン")
        .padding()
        .background(.blue)
        .foregroundColor(.white)
        .cornerRadius(10)
}
  • Text の代わりに Button の中で好きなビューを使えます。
    Screenshot 2025-06-01 at 22.20.43.png

3.アイコン付きボタン(Label を使う)

Button(action: {
    print("アイコン付きボタン")
}) {
    Label("保存する", systemImage: "square.and.arrow.down")
}
  • Label を使うとテキスト+アイコンのボタンが簡単に作れます。
    Screenshot 2025-06-01 at 22.15.41.png

まとめ

機能 実装方法の例
基本のボタン Button("タイトル") { 処理 }
デザインカスタム Text().padding().background() など
アイコン付き Label("タイトル", systemImage: "アイコン")

最後に

SwiftUIのButtonは、基本をマスターすればどんどん応用が効くようになります!
Swift UI のButtons基礎の使い方を説明しました!ぜひ参考にしてみてください👍

0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?