🕊️

【SwiftUI】TabViewやToolBarの背景が気になった話

2023/05/28に公開

Swift

SwiftUI

tech

大体のアプリに使われている TabView や ToolBar ですが、使っていて気になった点、というか友人と開発していて気持ち悪いねと話していた点について。

簡単に使い方を解説

struct ContentView: View {
    var body: some View {
        
         VStack {
             TabView {
                 FirstView()
                      .tabItem {
                          Label("1", systemImage: "1.circle")
                      }
                    
                 SecondView()
                      .tabItem {
                          Label("2", systemImage: "2.circle")
                 　　　}
             }
         }
	 .toolbar {
            Button {
                
            } label: {
                Label("sample", systemImage: "plus")
            }
        }
    }
}

TabView の使い方は、TabView{} の中に表示したいViewを入れ、それぞれに tabItem でアイコンなどを指定してあげるだけです。
また、.badge() を使用することで、数字や文字を表示させることができ、通知が来てる時風になります。

ToolBar は .toolbar{} の中に Button など使いたいものを入れてあげます。

本題

SwiftUI の TabView や ToolBar では、View が下に潜り込まない限り境界線が表示されません。しかし List や ScrollView を使用し、下に潜り込ませた状態で View を切り替えると潜り込んでいない View でも境界線が表示されてしまいます（gifを用意しましたが、みにくくてすみません）。

そこで、もう１つの View でも List や ScrollView を使用することで解決？しました。

実際にApple が SwiftUI で開発したアプリでも、必要ないような Viewで ScrollView が使用されていることがあったのでこれが正解なのかなと勝手に納得した。
というお話しでした。

他に、これで解決した！というのがありましたら、教えていただけると嬉しいです。

簡単に使い方を解説

本題

Discussion