Удалите или измените цвет безопасной области внизу представления в SwiftUI - PullRequest
Новая
       25

Удалите или измените цвет безопасной области внизу представления в SwiftUI

2 голосов
/ 01 марта 2020

Вот снимок экрана: enter image description here

Код для просмотра выглядит следующим образом: 

struct ViewDetails: View {

    @EnvironmentObject var displayDetails: DisplayDetails

    var body: some View { 

        ScrollView {

            GeometryReader { geometry in

                ZStack {

                    if geometry.frame(in: .global).minY <= 0 {

                        Image("header")
                            .resizable()
                            .aspectRatio(contentMode: .fill)
                            .frame(width: geometry.size.width, height: geometry.size.height)
                            .offset(y: geometry.frame(in: .global).minY/9)
                            .clipped()

                    } else {

                        Image("header")
                            .resizable()
                            .aspectRatio(contentMode: .fill)
                            .frame(width: geometry.size.width, height: geometry.size.height + geometry.frame(in: .global).minY)
                            .clipped()
                            .offset(y: -geometry.frame(in: .global).minY)

                     }

                }   

            }.frame(height: 400)

            VStack(alignment: .leading) {

                HStack {

                    Image("author")
                        .resizable()
                        .aspectRatio(contentMode: .fill)
                        .frame(width: 60, height: 60)
                        .clipped()
                        .cornerRadius(10)

                    VStack(alignment: .leading) {

                        Text("Article by")
                            .font(.custom("AvenirNext-Regular", size: 15))
                            .foregroundColor(.gray)

                        Text("John Doe")
                            .font(.custom("AvenirNext-Demibold", size: 15))

                    }

                }.padding(.top, 20)

                Text("Lorem ipsum dolor sit amet")
                    .font(.custom("AvenirNext-Bold", size: 30))
                    .lineLimit(nil)
                    .padding(.top, 10)

                Text("3 min read • 22. November 2019")
                    .font(.custom("AvenirNext-Regular", size: 15))
                    .foregroundColor(.gray)
                    .padding(.top, 10)

                Text(articleContent)
                    .font(.custom("AvenirNext-Regular", size: 20))
                    .lineLimit(nil)
                    .padding(.top, 30)

            }
            .frame(width: 350)

        }
        .edgesIgnoringSafeArea(.all)

            .onAppear(perform: {

                self.displayDetails.showFullScreen.toggle()

            })

    }

}

Так что я не уверен, что я Я могу удалить все, что отображается серым / белым внизу, или, если я могу изменить цвет для него, в любом случае мне подходит, но я не могу этого достичь !? Может ли кто-нибудь помочь.

1 Ответ

0 голосов

Я немного изменил ваш код и запустил его на симуляторе. Единственное изменение - это просто добавление .background(Color.yellow) перед .edgesIgnoringSafeArea(.all). Вот полный фрагмент кода с результатом: 

struct ViewDetails: View {

    var body: some View {

        ScrollView {

            GeometryReader { geometry in

                ZStack {

                    if geometry.frame(in: .global).minY <= 0 {

                        Image("hp")
                            .resizable()
                            .aspectRatio(contentMode: .fill)
                            .frame(width: geometry.size.width, height: geometry.size.height)
                            .offset(y: geometry.frame(in: .global).minY/9)
                            .clipped()

                    } else {

                        Image("header")
                            .resizable()
                            .aspectRatio(contentMode: .fill)
                            .frame(width: geometry.size.width, height: geometry.size.height + geometry.frame(in: .global).minY)
                            .clipped()
                            .offset(y: -geometry.frame(in: .global).minY)

                     }

                }

            }.frame(height: 400)


            VStack(alignment: .leading) {

                HStack {

                    Image("author")
                        .resizable()
                        .aspectRatio(contentMode: .fill)
                        .frame(width: 60, height: 60)
                        .clipped()
                        .cornerRadius(10)

                    VStack(alignment: .leading) {

                        Text("Article by")
//                            .font(.custom("AvenirNext-Regular", size: 15))
                            .foregroundColor(.gray)

                        Text("John Doe")
                            .font(.custom("AvenirNext-Demibold", size: 15))

                    }

                }.padding(.top, 20)

                Text("Lorem ipsum dolor sit amet")
//                    .font(.custom("AvenirNext-Bold", size: 30))
                    .lineLimit(nil)
                    .padding(.top, 10)

                Text("3 min read • 22. November 2019")
                    .font(.custom("AvenirNext-Regular", size: 15))
                    .foregroundColor(.gray)
                    .padding(.top, 10)

                Text("articleContent")
                    .font(.custom("AvenirNext-Regular", size: 20))
                    .lineLimit(nil)
                    .padding(.top, 30)

            }
            .frame(width: 350)


        }
        .background(Color.yellow)
            .onAppear(perform: {

            //                self.displayDetails.showFullScreen.toggle()

                        })
        .edgesIgnoringSafeArea(.all)   

    }

результат:

enter image description here

PS : Там в ваших фрагментах кода много ненужных деталей, поэтому их сложно проанализировать = (

...