swift 防止List中的最后一行被ZStack中的其他视图覆盖

inn6fuwd 于 2023-05-27 发布在 Swift

关注(0)|答案(2)|浏览(92)

我有一个List部分被半透明视图覆盖（我们称之为 overlay）。我的问题是，对于长列表，最后一行是不可访问的，因为它们被覆盖。
我使用ZStack来布局最终视图。我考虑过在最后一行添加某种 *padding *，可以使列表内容更大一些，这样它就可以完全滚动出覆盖层，但我不知道如何操作，甚至不知道使用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，所以我有点迷失了关于如何搜索正确的术语。

swift

来源：https://stackoverflow.com/questions/63548873/prevent-last-rows-in-list-to-be-covered-by-other-view-in-zstack

2条答案

按热度按时间

nkoocmlb1#

可能的解决方案是计算覆盖区域的高度，并将具有该高度的一些透明视图添加到列表的底部。
下面是一个使用视图首选项的方法演示。使用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()
    }
}

赞(0）回复(0）举报 2023-05-27

alen0pnh2#

现在您可以添加到列表。safeAreaInset

List {
    // content
}
.safeAreaInset(.bottom) {
    // view for bottom
}

赞(0）回复(0）举报 2023-05-27

我来回答

swift 防止List中的最后一行被ZStack中的其他视图覆盖

2条答案

相关问题

热门标签

最新问答