SwiftUI视图位于中间而不是顶部

ukxgm1gy  于 2023-09-30  发布在  Swift
关注(0)|答案(6)|浏览(174)

我正在尝试在SwiftUI中创建视图。在预览中,它看起来应该是这样的,但当在我的iPhone上运行时(或在实时预览上)它看起来像是偏移的。
我尝试将填充设置为-150,但TextField对触摸没有响应。

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"))

预览中的视图:

iPhone上的视图:

pb3skfrl

pb3skfrl1#

我也遇到了同样的问题,但发现我遇到的问题是多次使用NavigationView。
我认为我们应该在每个视图中都有NavigationView,但显然,我们应该只在应用程序的主视图中放置navigationView,并且我们通过navigationLink进入的所有其他视图都会自动获得back选项,而无需再次提及NavigationView。
因此,请检查您是否在代码中多次使用navigationView。
奇怪的是,我们甚至可以在没有navigationView的视图中指定navigationBarTitle,这是因为navigationView位于父视图中。使用“显示模式:.inline”,使导航区域尽可能小,它将保存您的空间。
另一件要做的事情是使用Spacer()。如果你想让所有的项目都在顶部,只需将Spacer()作为VStack中的最后一个项目,它会将所有项目推到顶部。
请看这个例子:

VStack {
    // What you care about displaying
    Text("Something to Show 1")
    Text("Something to Show 2")
    Text("Something to Show 3")

    // This should be the last, put everything to the top
    Spacer()             
}
.navigationBarTitle(Text("The Title"), displayMode: .inline)
yacmzcpb

yacmzcpb2#

我有一个类似的问题,我想让一个VStack在屏幕顶部对齐其内容,并且只在父级中使用NavigationView,但VStack显示居中。对我来说,解决这个问题的方法是使用Spacer(),如下所示:

VStack(alignment: .leading, spacing: 10){
        HStack(alignment: .center, spacing: 5.0) {
            ...
        }
        Group{
            ...
        }
        Spacer() //<-- This solved my problem
   }
lztngnrs

lztngnrs3#

假设您的VStack被 Package 在NavigationView中,这就是它在模拟器中无法正确渲染的原因。它在预览中显示良好的原因是它没有显示导航栏(其中也包括后退按钮),因为画布不知道这个视图可能被推,但在运行时,导航栏被添加,而您也使用了额外的NavigationView。
要修复它,请从NavigationView中打开VStack,并从子视图中删除此NavigationView。

mlnl4t2r

mlnl4t2r4#

1.要使其在预览(甚至是子视图)中的导航项中正确可见,您需要将View Package 到NavigationView { }中,因为Canvas是一个空的干净环境,它不知道View可能会被推入NavigationView
1.在iPhone上修复它可以确保您正确地推送子视图。应该是NavigationButton(destination: AddList()) {}
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)
        }
      }
    }
7fhtutme

7fhtutme5#

SwiftUI

iOS 15及更高版本 *
将**.multilineTextAlignment(.leading)添加到您的VStackText(...)**
经过验证和测试。

bfnvny8b

bfnvny8b6#

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"))
}

相关问题