防止列表中的最后一行被ZStack中的其他视图覆盖
防止列表中的最后一行被ZStack中的其他视图覆盖
提问于 2020-08-23 15:37:16
我有一个由半透明视图部分覆盖的List (让我们称之为覆盖层)。我的问题是，对于长列表，最后一行是不可访问的，因为它们被覆盖在覆盖层中。
我使用一个ZStack来布局最终视图。我考虑过在最后一行中添加某种填充，这样可以使列表内容更大一些，这样它就可以完全脱离覆盖，但我不知道如何做，或者即使使用ZStack是正确的列表处理方式。
import SwiftUI
struct ListWithBottomOverlay: View {
var body: some View {
GeometryReader { proxy in
ZStack {
List {
ForEach(1..<20) { number in
Text("\(number)")
}
}
VStack {
Spacer().frame(maxHeight: .infinity)
VStack {
HStack {
Button(action: {}, label: { Text("Hello") })
.frame(minHeight: 100)
}
HStack {
Button(action: {}, label: { Text("World!") })
.frame(minHeight: 100)
}
}
.frame(maxWidth: .infinity)
.background(Color(.yellow).opacity(0.8))
}
}
}
}
}
struct ListWithBottomOverlay_Previews: PreviewProvider {
static var previews: some View {
ListWithBottomOverlay()
}
}我很抱歉，如果这是一个重复的问题，我刚刚开始学习SwiftUI，所以我有点迷失了如何寻找正确的术语。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-08-23 15:57:59
可能的解决方案是计算覆盖区域的高度，并在列表的底部添加一些具有该高度的透明视图。
下面是使用视图首选项的方法演示。用Xcode 12 / iOS 14测试
struct ListWithBottomOverlay: View {
@State private var height = CGFloat.zero
var body: some View {
GeometryReader { proxy in
ZStack {
List {
ForEach(1..<20) { number in
Text("\(number)")
}
Color.clear.frame(height: height) // injected empty space
}
VStack {
Spacer().frame(maxHeight: .infinity)
VStack {
HStack {
Button(action: {}, label: { Text("Hello") })
.frame(minHeight: 100)
}
HStack {
Button(action: {}, label: { Text("World!") })
.frame(minHeight: 100)
}
}
.frame(maxWidth: .infinity)
.background(GeometryReader {
// use color filled area in background to read covered frame
Color(.yellow).opacity(0.8)
.edgesIgnoringSafeArea(.bottom)
.preference(key: ViewHeightKey.self, value: $0.frame(in: .local).size.height)
})
}
}
.onPreferenceChange(ViewHeightKey.self) {
// view preferences transferred in one rendering cycle and
// give possibility to update state
self.height = $0
}
}
}
}
struct ViewHeightKey: PreferenceKey {
typealias Value = CGFloat
static var defaultValue = CGFloat.zero
static func reduce(value: inout Value, nextValue: () -> Value) {
value += nextValue()
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63548873
复制相关文章
相似问题
腾讯云开发者
