web-dev-qa-db-fra.com

La vue SwiftUI est au milieu plutôt qu'en haut

J'essaie de créer une vue dans SwiftUI. Dans l'aperçu, il semble qu'il devrait, mais lorsqu'il est exécuté sur mon iPhone (ou sur l'aperçu en direct), il semble qu'il soit décalé.

J'ai essayé de définir le remplissage à -150, mais le TextField ne répond pas aux touches.

VStack {
    Text("Name:")
        .padding(.bottom, 1)
    TextField($name)
        .padding(.horizontal, 25.0)
        .textFieldStyle(.roundedBorder)
        .frame(maxWidth: 500)
    Text("Image:")
        .padding(.top, 1)
    Image(uiImage: image!)
        .resizable(capInsets: EdgeInsets(), resizingMode: .stretch)
        .scaledToFit()
        .frame(width: 250, height: 250)
        .clipShape(RoundedRectangle(cornerRadius: 10))
        .padding(.top, 5)
    Button(action: {
        withAnimation {
            self.showImagePicker = true
        }
    }) {
        Text("Select Image")
            .color(.init(red: 20/255, green: 146/255, blue: 81/255))
    }
    Button(action: {
        let list = LSList( title: self.name,
                                           image: self.image!,
                                           id: 0)
        list.add()
        self.userData.listsData.append(list)
    }) {
        Text("Add List")
            .color(.white)
            .font(.system(size: 25))
            .bold()
            .padding(.horizontal, 7)
            .frame(height: 35)
            .background(Color.green)
            .clipShape(RoundedRectangle(cornerRadius: 3))
    }
    Spacer()
} .navigationBarTitle(Text("Add List"))

La vue dans l'aperçu: The view in the preview

La vue sur mon iPhone: The view on my iPhone

iosswiftswiftui
5
Shahar

En supposant que votre VStack est enveloppé dans un NavigationView, c'est la raison pour laquelle il ne s'affiche pas correctement dans le simulateur. La raison pour laquelle il apparaît bien dans l'aperçu est qu'il n'affiche pas la barre de navigation (qui inclut également le bouton de retour) car le canevas ne sait pas que cette vue peut être poussée mais en cours d'exécution, la barre de navigation est ajoutée pendant que vous êtes également en utilisant également une NavigationView supplémentaire.

Pour résoudre ce problème, décompressez le VStack de NavigationView et supprimez simplement cette NavigationView de la vue enfant.

1
Mohammad Reza Farahani
  1. Pour le rendre visible correctement avec les éléments de navigation dans les aperçus (même pour les vues enfants), vous devez encapsuler la vue dans le NavigationView { }, Car le canevas est un environnement propre et vide et il ne sait pas que la vue peut être poussé dans le NavigationView
  2. Pour le réparer sur iPhone, assurez-vous que vous appuyez correctement sur la vue enfant. Ce devrait être NavigationButton(destination: AddList()) {}

Exemple d'implémentation de RowView:

   NavigationButton(destination: CarDetail(car: car)) {
      HStack {
        VStack(alignment: .leading) {
          Text(car.name)
          Text(car.isAvailable ? "Is Available" : "Out of stock")
            .font(.subheadline)
            .foregroundColor(.secondary)
        }
      }
    }
0
DenFav
 ScrollView(.vertical){
   VStack {
    Text("Name:")
        .padding(.bottom, 1)
    TextField($name)
        .padding(.horizontal, 25.0)
        .textFieldStyle(.roundedBorder)
        .frame(maxWidth: 500)
    Text("Image:")
        .padding(.top, 1)
    Image(uiImage: image!)
        .resizable(capInsets: EdgeInsets(), resizingMode: .stretch)
        .scaledToFit()
        .frame(width: 250, height: 250)
        .clipShape(RoundedRectangle(cornerRadius: 10))
        .padding(.top, 5)
    Button(action: {
        withAnimation {
            self.showImagePicker = true
        }
    }) {
        Text("Select Image")
            .color(.init(red: 20/255, green: 146/255, blue: 81/255))
    }
    Button(action: {
        let list = LSList( title: self.name,
                                           image: self.image!,
                                           id: 0)
        list.add()
        self.userData.listsData.append(list)
    }) {
        Text("Add List")
            .color(.white)
            .font(.system(size: 25))
            .bold()
            .padding(.horizontal, 7)
            .frame(height: 35)
            .background(Color.green)
            .clipShape(RoundedRectangle(cornerRadius: 3))
    }
    Spacer()
} .navigationBarTitle(Text("Add List"))
}
0
In Sert