ios 如何删除VStack中ScrollView/List和其他视图之间不需要的填充

c3frrgcw  于 2023-06-07  发布在  iOS
关注(0)|答案(1)|浏览(142)

我正在创建一个底部面板以在我的应用中使用。它不是一个标签栏,所以标签栏不会工作,思考像底部面板在语音备忘录应用程序。当我尝试将这个类似于RoundedRectangle的页脚放在带有ScrollView或List的VStack中时,它会在RoundedRectangle和ScrollView之间添加填充。

您可以通过在VStack中添加background(Color.red)来查看不需要的填充。代码在这里:

import SwiftUI

struct TestView: View {
    var body: some View {
        VStack {
            List {
                Group {
                    Text("Hello")
                    Text("Hello")
                    Text("Hello")
                    Text("Hello")
                    Text("Hello")
                    Text("Hello")
                    Text("Hello")
                    Text("Hello")
                    Text("Hello")
                    Text("Hello")
                }
                
                Group {
                    Text("Hello")
                    Text("Hello")
                    Text("Hello")
                    Text("Hello")
                    Text("Hello")
                    Text("Hello")
                    Text("Hello")
                    Text("Hello")
                    Text("Hello")
                    Text("Hello")
                }
            }
            
            ZStack {
                RoundedRectangle(cornerRadius: 20)
                    .foregroundColor(.gray)
                    .ignoresSafeArea()
                    .frame(height: 100)
            }
        }
        .background(Color.red)
    }
}

struct TestView_Previews: PreviewProvider {
    static var previews: some View {
        TestView()
    }
}

什么是最好的方法来摆脱它?或者,我想,在屏幕底部添加一个像RoundedRectangle这样的元素的最好方法是什么?ScrollView占用了最大的空间,所以它将RoundedRectangle推到底部,但似乎无法移除填充。我尝试通过在roundedRectangle上添加偏移来修复这个问题,但是底部缺少了空间。下面的预览只添加了`.offset(y:-8)到RoundedRectangle。

然后,我通过ZStack-ing另一个RoundedRectangle来修复这个问题,以正确地填充底部,但这一切看起来都很复杂和笨拙。有没有更好的方法来完成我正在做的事情?

2skhul33

2skhul331#

IMO你不需要VStack:让List成为顶部元素,并在其上使用.safeAreaInset(edge: .bottom)修饰符来显示圆角矩形:

struct TestView: View {
    var body: some View {
        List {
            // same as before
        } // end of List
        .safeAreaInset(edge: .bottom) {
            RoundedRectangle(cornerRadius: 20)
                .foregroundColor(.gray)
                .ignoresSafeArea()
                .frame(height: 100)
        }

顺便说一句,如果你的清单很短,这也会起作用。

相关问题