1
Help us understand the problem. What are the problem?

posted at

【SwiftUI】Buttonのスタイル

iOS

automatic

Simulator Screen Shot - iPhone 12 - 2022-06-10 at 14.07.19.png

struct ContentView: View {
    var body: some View {
        List {
            Button(action: {
                print("automatic")
            }) {
                Text("テスト")
            }
            .buttonStyle(.automatic)
        }
    }
}

セル全体がボタンになっています。

bordered

Simulator Screen Shot - iPhone 12 - 2022-06-10 at 14.08.11.png

struct ContentView: View {
    var body: some View {
        List {
            Button(action: {
                print("bordered")
            }) {
                Text("テスト")
            }
            .buttonStyle(.bordered)
        }
    }
}

plain

Simulator Screen Shot - iPhone 12 - 2022-06-10 at 14.10.02.png

struct ContentView: View {
    var body: some View {
        List {
            Button(action: {
                print("plain")
            }) {
                Text("テスト")
            }
            .buttonStyle(.plain)
        }
    }
}

borderedProminent

Simulator Screen Shot - iPhone 12 - 2022-06-10 at 14.11.14.png

struct ContentView: View {
    var body: some View {
        List {
            Button(action: {
                print("borderedProminent")
            }) {
                Text("テスト")
            }
            .buttonStyle(.borderedProminent)
        }
    }
}

borderless

Simulator Screen Shot - iPhone 12 - 2022-06-10 at 20.07.22.png

struct ContentView: View {
    var body: some View {
        List {
            Button(action: {
                print("borderless")
            }) {
                Text("テスト")
            }
            .buttonStyle(.borderless)
        }
    }
}

macOS

automatic

スクリーンショット 2022-06-10 20.16.56.png

struct ContentView: View {
    var body: some View {
        VStack {
            Button(action: {

            }) {
                Text("テスト")
            }
            .buttonStyle(.automatic)
        }
        .frame(width: 600, height: 400)
    }
}

bordered

スクリーンショット 2022-06-10 20.16.56.png

struct ContentView: View {
    var body: some View {
        VStack {
            Button(action: {

            }) {
                Text("テスト")
            }
            .buttonStyle(.bordered)
        }
        .frame(width: 600, height: 400)
    }
}

plain

スクリーンショット 2022-06-10 20.51.20.png

struct ContentView: View {
    var body: some View {
        VStack {
            Button(action: {

            }) {
                Text("テスト")
            }
            .buttonStyle(.plain)
        }
        .frame(width: 600, height: 400)
    }
}

borderedProminent

スクリーンショット 2022-06-10 20.54.17.png

struct ContentView: View {
    var body: some View {
        VStack {
            Button(action: {

            }) {
                Text("テスト")
            }
            .buttonStyle(.borderedProminent)
        }
        .frame(width: 600, height: 400)
    }
}

borderless

スクリーンショット 2022-06-10 20.54.49.png

struct ContentView: View {
    var body: some View {
        VStack {
            Button(action: {

            }) {
                Text("テスト")
            }
            .buttonStyle(.borderless)
        }
        .frame(width: 600, height: 400)
    }
}

link

スクリーンショット 2022-06-10 20.55.17.png

struct ContentView: View {
    var body: some View {
        VStack {
            Button(action: {

            }) {
                Text("テスト")
            }
            .buttonStyle(.link)
        }
        .frame(width: 600, height: 400)
    }
}

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
1
Help us understand the problem. What are the problem?