ZStack内的SwiftUI列表内的NavigationView

我正在构建一个带有列表和自定义全屏背景色的屏幕。在顶层我有NavigationView。要绘制背景，我使用ZStack。问题是，当我在ZStack中包装列表并滚动它时，列表项会使用NavigationView折叠。只有当列表是NavView的直接子项并且没有更改背景颜色时，我才能实现正确的行为。 代码：

init（）{
//标题文本颜色
让navBarAppearance=UINavigationBar.appearance（）
navBarAppearance.largeTitleTextAttributes=[.foregroundColor:UIColor.white]
navBarAppearance.titleTextAttributes=[.foregroundColor:UIColor.white]
navBarAppearance.backgroundColor=.clear
//清除列表背景色
UITableView.appearance（）.separatorStyle=.none
UITableViewCell.appearance（）.backgroundColor=.clear
UITableView.appearance（）.backgroundColor=.clear
UITableViewCell.appearance（）.selectionStyle=.none
}
var body：一些观点{
导航视图{
ZStack{
线性渐变（渐变：渐变（颜色：[颜色（“暗影”）、颜色（“原色暗”）]）、起点：。顶部，终点：。底部）
.edgesIgnoringSafeArea（.all）
列表（self.viewModel.rooms.enumerated（）.map（{$0}），id:\.element.id）{（索引，房间）在
ZStack{
RoomsItemView（房间：房间）
.onAppear（表演：{
让计数=self.viewModel.rooms.count
如果索引==计数-1{
self.viewModel.loadRooms（currentListSize:count）
}
})
导航链接（目的地：客房视图（房间：房间））{
EmptyView（）
}
}
}
}
.pullToRefresh（isShowing:self.$isRefreshing，onRefresh:self.onRefresh）
.navigationBarTitle（“房间名称”）
.navigationBarBackButtonHidden（真）
.航海术语(
领先：
按钮（操作：{
self.shouldShowSpotifyAuth=false
}) {
VStack{
垫片（）
HStack{
图像（系统名称：“chevron.left”）
.可调整大小（）
.scaledofit（）
.框架（高度：20.0）
垫片（）
}
垫片（）
}
.框架（宽度：40.0，高度：30.0）
},
尾随：
按钮（操作：{
打印（“创建房间”）
}) {
VStack{
垫片（）
HStack{
垫片（）
图像（系统名称：“plus”）
.可调整大小（）
.scaledofit（）
.框架（高度：20.0）
}
垫片（）
}
.框架（宽度：40.0，高度：30.0）
}
)
}
.onAppear（表演：{
self.onRefresh（）
})
.onReceive（viewModel.onRoomsUpdate）{
self.isRefreshing=false
}
.signet（DragGesture（）.updateing（$dragOffset，body:{（值、状态、事务）在中）
if（value.startLocation.x<20&&value.translation.width>100）{
self.shouldShowSpotifyAuth=false
}
})
)
}

预期结果：

实际结果：

  init() {
        // Title text color
        let navBarAppearance = UINavigationBar.appearance()
        navBarAppearance.largeTitleTextAttributes = [.foregroundColor: UIColor.white]
        navBarAppearance.titleTextAttributes = [.foregroundColor: UIColor.white]
        navBarAppearance.backgroundColor = .clear

        // Clear list background color
        UITableView.appearance().separatorStyle = .none
        UITableViewCell.appearance().backgroundColor = .clear
        UITableView.appearance().backgroundColor = .clear

        UITableViewCell.appearance().selectionStyle = .none
    }

var body: some View {
        NavigationView {
            ZStack {
                LinearGradient(gradient: Gradient(colors: [Color("DarkShade"), Color("PrimaryDark")]), startPoint: .top, endPoint: .bottom)
                    .edgesIgnoringSafeArea(.all)

                List(self.viewModel.rooms.enumerated().map({ $0 }), id: \.element.id) { (index, room) in
                    ZStack {
                        RoomsItemView(room: room)
                            .onAppear(perform: {
                                let count = self.viewModel.rooms.count

                                if index == count - 1 {
                                    self.viewModel.loadRooms(currentListSize: count)
                                }
                            })

                        NavigationLink(destination: GuestRoomView(room: room)) {
                            EmptyView()
                        }
                    }
                }
            }
                .pullToRefresh(isShowing: self.$isRefreshing, onRefresh: self.onRefresh)
                .navigationBarTitle("rooms_title")
                .navigationBarBackButtonHidden(true)
                .navigationBarItems(
                    leading:
                        Button(action: {
                            self.shouldShowSpotifyAuth = false
                        }) {
                            VStack {
                                Spacer()

                                HStack {
                                    Image(systemName: "chevron.left")
                                        .resizable()
                                        .scaledToFit()
                                        .frame(height: 20.0)

                                    Spacer()
                                }

                                Spacer()
                            }
                                .frame(width: 40.0, height: 30.0)
                    },
                    trailing:
                        Button(action: {
                            print("create room")
                        }) {
                            VStack {
                                Spacer()

                                HStack {
                                    Spacer()

                                    Image(systemName: "plus")
                                        .resizable()
                                        .scaledToFit()
                                        .frame(height: 20.0)
                                }

                                Spacer()
                            }
                                .frame(width: 40.0, height: 30.0)
                    }
                )
        }
            .onAppear(perform: {
                self.onRefresh()
            })
            .onReceive(viewModel.onRoomsUpdate) {
                self.isRefreshing = false
            }
            .gesture(DragGesture().updating($dragOffset, body: { (value, state, transaction) in
                        if(value.startLocation.x < 20 && value.translation.width > 100) {
                            self.shouldShowSpotifyAuth = false
                        }
                })
            )
    }