[英]how to disable ScrollView clipping content in SwiftUI
I need that red rectangle should be visible until reach to the leading or trailing edge of the device.我需要红色矩形在到达设备的前缘或后缘之前应该是可见的。 So the problem is scrollview cliping red boxes (hiding) as move beyond the scrollview container size.
所以问题是滚动视图在超出滚动视图容器大小时剪切红色框(隐藏)。 code:
代码:
struct test: View {
var body: some View {
ScrollView(.horizontal,showsIndicators:false) {
LazyHStack{
ForEach(0...4,id:\.self){i in
Rectangle()
.fill(Color.red)
.frame(width: 60, height: 50, alignment: .center)
}
}.padding(.horizontal, 4)
}.background(Color.yellow)
.frame(width: 68, height: 60, alignment: .trailing)
}
} }
Expected:(I also produce this result by setting ScrollView
full width and adding padding ( .padding(.horizontal, UIScreen.main.bounds.width/2 )
) to LazyHStack
) But it is a hack by adding space at start and end, and problem remain unresolved, that is clipping of ScrollView
content预期:(我也通过设置
ScrollView
全宽并添加填充( .padding(.horizontal, UIScreen.main.bounds.width/2 )
)到LazyHStack
来产生这个结果)但它是通过在开始和结束添加空间来破解的,问题仍未解决,即ScrollView
内容的裁剪
I'm not exactly sure what the problem is, but you probably want the padding
to be on the Text
and not the ScrollView
.我不确定问题是什么,但您可能希望
padding
在Text
而不是ScrollView
上。 Correct me if this isn't what you are looking for.如果这不是您要找的,请纠正我。
struct test: View {
var body: some View {
ScrollView(.horizontal) {
Text("Hello, World!")
.frame(width: UIScreen.main.bounds.width, alignment: .leading)
.padding(.horizontal, 40)
}
.background(Color.yellow)
}
}
Result:结果:
It seems to be working for me when I remove the line: .frame(width: UIScreen.main.bounds.width, alignment: .leading)
.当我删除以下行时,它似乎对我
.frame(width: UIScreen.main.bounds.width, alignment: .leading)
。
On an iPhone XR, I'm seeing a horizontal ScrollView with a yellow background starting at 40 offset from leading and ending at 40 offset from trailing.在 iPhone XR 上,我看到一个带有黄色背景的水平 ScrollView,从前导偏移 40 处开始,到尾随偏移 40 处结束。 Is this what you're trying to achieve?
这是你想要达到的目标吗?
Also, I'm pretty sure UIScreen.main.bounds.width
is going to return the width of the device, which will be a problem if you want your text to take up 80 pixels less than that value (since your ScrollView has 40 padding either side).此外,我很确定
UIScreen.main.bounds.width
将返回设备的宽度,如果您希望文本占用比该值少 80 个像素(因为您的 ScrollView 有 40 个填充任何一边)。
if I understand correct from your answers, this is the result you want:如果我从你的回答中理解正确,这就是你想要的结果:
struct test: View {
var body: some View {
GeometryReader { geo in
VStack {
Spacer()
HStack {
ScrollView(.horizontal,showsIndicators:false) {
LazyHStack{
ForEach(0...4,id:\.self){i in
Rectangle()
.fill(Color.red)
.frame(width: 60, height: 50, alignment: .center)
}
}
.padding(.horizontal,40)
}
.background(Color.yellow)
.frame(width: geo.size.width, height: 60, alignment: .center)
}
Spacer()
}
}
}
}
Result:结果:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.