VStackの上にあるSwiftUIの不思議な空間
Aug 20 2020
私はこのコードを持っています
NavigationView{
VStack{
GeometryReader{ geometry in
VStack{
Text("a")
}
.frame(width:geometry.size.width)
.background(Color.orange)
Spacer()
}
}
.modifier(NavBarModifier(font: self.fontUI,text: "Profile"))
}
.navigationViewStyle(StackNavigationViewStyle())
GeometryReaderをVStackの上部に表示したいのですが、次のようになります。

青い線がVStackの上部で、オレンジがGeometryReaderです。GeometryReaderの後にSpacer()を追加しようとしましたが、機能しませんでした。どうすればその間隔を削除できますか?
struct NavBarModifier: ViewModifier{
var font: UIFont
var text: String
func body(content: Content) -> some View {
return content
.zIndex(0)
.animation(.spring())
.padding(.top,80)
.navigationBarTitle(Text(self.text),displayMode: .inline)
.navigationBarHidden(false)
.foregroundColor(.orange)
.background(NavigationConfigurator { nc in
nc.navigationBar.barTintColor = UIColor(red: 243/255, green: 107/255, blue: 21/255, alpha: 1)
nc.navigationBar.titleTextAttributes = [
.foregroundColor : UIColor.white,
.font : self.font,
.kern: 1.2
]
}
.padding([.top, .leading, .trailing]))
}
}
回答
1 Asperi Aug 20 2020 at 16:32
で冗長なパディングを削除するだけです NavBarModifier
func body(content: Content) -> some View {
return content
.zIndex(0)
.animation(.spring())
// .padding(.top,80) // << this one !!
ignalonzo Aug 20 2020 at 15:54
あなたはの上でレイアウトにそれをGeometryReader後にスペーサーを追加する必要があるVStack
とも追加し.edgesIgnoringSafeArea(.top)
、それがその空白(安全領域)を無視し、それはの先頭に揃えるにするためにVStack
。
VStack {
GeometryReader{ geometry in
VStack {
Text("s")
}
.frame(width:geometry.size.width)
.background(Color.orange)
Spacer()
}
.edgesIgnoringSafeArea(.top)
Spacer()
}