Swiftui ScrollView意外受到scaleEffect修改器影响

Question

我有一些视图与固定大小的许多细节，并试图使用scaleEffect()按比例减少它们，以适应更好的较小的设备。然而，当在ScrollView上使用scaleEffect()时，我注意到它在ScrollView的轴上具有比预期更大的效果。下面的小例子:

import SwiftUI
struct FancyItemView: View {

var body: some View {
Rectangle()
.fill(.red)
.frame(width: 100, height: 100)
}
}
struct ItemDisplayView: View {
var sizeAdjustment: Double

var body: some View {
ScrollView(.horizontal){
FancyItemView()
}
.background(.blue)
.scaleEffect(sizeAdjustment)
.frame(width: 150 * sizeAdjustment, height: 100 * sizeAdjustment)
.border(.black)
}
}
struct ContentView: View {

var body: some View {
VStack{
ItemDisplayView(sizeAdjustment: 1)
ItemDisplayView(sizeAdjustment: 0.8)
ItemDisplayView(sizeAdjustment: 1.2)
}
.background(.gray)

}
}

struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}

结果视图的屏幕截图:https://i.stack.imgur.com/POvjw.png

在这个例子中，我只使用一个项目视图，但在我的实际代码中，ScrollView包含项目的标题和网格。我可以通过将scaleEffect应用到ScrollView周围的其他视图而不是应用到它来解决这个问题，但这会使代码更加混乱。所以我想知道是否有什么我错过了使scaleEffect与ScrollView正常工作。

感谢

Answer 1

我不认为.scaleEffect是合适的工具。它更多的是用于视觉呈现/动画，而不是布局视图。去掉.scaleEffect修饰符，将你的scale变量传递给你的控件，并适当地设置它的样式。

struct FancyItemView: View {
var sizeAdjustment: Double
var body: some View {
Rectangle()
.fill(.red)
.frame(width: 100 * sizeAdjustment, height: 100 * sizeAdjustment)
}
}
struct ItemDisplayView: View {
var sizeAdjustment: Double

var body: some View {
ScrollView(.horizontal){
FancyItemView(sizeAdjustment: sizeAdjustment) // pass the multiplier to the ChildView
}
.background(.blue)
//       .scaleEffect(sizeAdjustment) // remove this
//       .frame(width: 150 * sizeAdjustment, height: 100 * sizeAdjustment) // you probably don´t want this either
// or at least get rid of the multiplier
.border(.black)
}
}