Блог

Я хочу, чтобы содержимое списка отображалось через нижнюю панель, как это происходит с верхней панелью навигации, создавая эффект размытия. Я могу сделать это с ZStack помощью вместо VStack и некоторого отступа в последнем элементе списка, но тогда мне нужно знать точную высоту нижней панели, чего я хотел бы избежать.

Есть ли способ сделать это?

 struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack(spacing: 0) {
                List(1...30, id:.self) { i in
                    Rectangle()
                        .foregroundColor(Color.random)
                        .frame(height: 36)
                }
                .listStyle(PlainListStyle())
                Text("Bottom bar")
                    .font(.title)
                    .frame(maxWidth:.infinity)
                    .padding()
                    .background(.bar)
            }
            .navigationTitle("Some Nav Title")
            .navigationBarTitleDisplayMode(.inline)
        }
        
    }
}

extension Color {
    static var random: Color {
        return Color(
            red: .random(in: 0...1),
            green: .random(in: 0...1),
            blue: .random(in: 0...1)
        )
    }
}
 

Попробуйте использовать ZStack вместо VStack , как

         ZStack(alignment: .bottom) {         // << here !!
            List(1...30, id:.self) { i in
                Rectangle()
                    .foregroundColor(Color.random)
                    .frame(height: 36)
            }
            .listStyle(PlainListStyle())
            Text("Bottom bar")
                .font(.title)
                .frame(maxWidth:.infinity)
                .padding()
                .background(.regularMaterial)
        }
 

Примечание: скорее всего, вам нужно будет добавить нижний колонтитул в список той же высоты, что и ваша панель, поэтому при прокрутке вниз будут видны последние элементы.