我正在使用 GeometryReader() 和 .frame() 來展示它們的可比性并使用它們的寬度。但是，當寬度小于最小值時，包含在 GeometryReader() 中的物件沒有居中對齊。請參閱隨附的 GIF 進行演示。
你能幫我對齊嗎？
理想的：
當前的：
struct ExampleView: View {
@State private var width: CGFloat = 50
var body: some View {
VStack {
SubView()
.frame(width: self.width, height: 120)
.border(Color.blue, width: 2)
Text("Offered Width is \(Int(width))")
Slider(value: $width, in: 0...200, step: 5)
}
}
}
struct SubView: View {
var body: some View {
GeometryReader { geometry in
Rectangle()
.fill(Color.yellow.opacity(0.6))
.frame(width: max(geometry.size.width, 120), height: max(geometry.size.height, 120))
}
}
}
uj5u.com熱心網友回復：
那是因為GeometryReader它的孩子沒有居中。
您必須Rectangle通過添加.position 修飾符或.offset.
.position將相對于父中心移動矩形框架的原點。
.offset不會改變框架，而是改變渲染（像CGAffineTransform翻譯一樣作業）。
您的以下修飾符Rectangle將在視覺上產生相同的結果（盡管在引擎蓋下有所不同）：
Rectangle()
.fill(Color.yellow.opacity(0.6))
.frame(width: max(geometry.size.width, 120), height: max(geometry.size.height, 120))
.position(x: geometry.size.width / 2, y: geometry.size.height / 2)
或者
let rectWidth = max(geometry.size.width, 120)
Rectangle()
.fill(Color.yellow.opacity(0.6))
.frame(width: rectWidth, height: max(geometry.size.height, 120))
.offset(x: ((geometry.size.width - rectWidth) / 2), y: 0)
請注意，您的矩形框架超出了其父級的范圍。我建議避免這種情況，因為它會導致在螢屏上布置其他 UI 元素時遇到各種困難。
您可以反過來構建它（除非您的實際目標是了解如何GeometryReader作業）：
struct ExampleView: View {
@State private var width: CGFloat = 50
var body: some View {
VStack {
let minWidth: CGFloat = 120
let subViewWidth: CGFloat = max(minWidth, width)
SubView(desiredWidth: width)
.frame(width: subViewWidth, height: 120)
.background(.yellow.opacity(0.6))
Text("Offered Width is \(Int(width))")
Slider(value: $width, in: 0...200, step: 5)
}
}
}
struct SubView: View {
let desiredWidth: CGFloat
var body: some View {
Rectangle()
.fill(.clear)
.border(Color.blue, width: 2)
.frame(width: desiredWidth, height: nil)
}
}
在這個例子中，它SubView有一個黃色填充和一個最小的框架寬度，而內部矩形只是采用滑塊上設定的任何寬度。它也不再需要GeometryReader了。它的外觀和行為都相同，但沒有任何視圖超出其父級的范圍。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/476600.html