🐵

minHeightを用いて高さが可変のカスタムボタンを作成する

2024/04/11に公開

高さが可変のカスタムボタンを作成するときは、.frame(minHeight:)を用いる。

Button {
    } label: {
        Text("Hello,\n World")
    }
    .foregroundColor(.black)
    .padding()
    .frame(minHeight: 32.0)
    .background(
        RoundedRectangle(cornerRadius: 16.0)
            .strokeBorder(Color.blue, lineWidth: 1.0)
    )

.frame(height:)を使うと高さが固定されてしまい一行表示になってしまう。

Button {
    } label: {
        Text("Hello,\n World")
    }
    .foregroundColor(.black)
    .padding()
    .frame(height: 32.0)
    .background(
        RoundedRectangle(cornerRadius: 16.0)
            .strokeBorder(Color.blue, lineWidth: 1.0)
    )

Discussion