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

SwiftUIボタンの形の不審な枠 解決方法

Posted at

こちらで紹介したボタンの形ですが、解決方法がございます。

原因としてはbuttonStyleを設定していない事です。
コメントで教えて頂きました。

ただ、buttonStyleを設定すると見た目上は確かに不審な枠が消えるのですが、
ボタンのタップ範囲が狭くなってしまいました。

こちらがこのタブの修正後の実装です

スクリーンショット 2025-03-29 18.54.32.png

.swift
HStack(spacing: 0) {
    ForEach(0..<menuItems.count, id: \.self) { index in
        Button {
            withAnimation {
                selectedTab = index
            }
        } label: {
            HStack(spacing: 0) {
                Spacer()
                Text(menuItems[index].label)
                    .foregroundColor(index == selectedTab ? .black : .gray
                Spacer()
            }.background(.white)
            
        }
        .buttonStyle(.plain)
    }
}

.buttonStyle(.plain).background(.white)を追加しました。
Button内のlabelにbackgroundを指定してあげないとタップ範囲がテキスト部のみで、ボタン全体にならないみたいです。

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