Skip to content

控制视图是否存在,以及其如何影响整体布局。

如果您的设计中包含一些并非始终相关的视图,您可以选择如何让这些视图消失来影响整体布局。您可以将所有其他内容布局为该视图不存在,然后在该视图可见时更新其他内容的位置。或者,无论该视图是否可见,您都可以为其预留空间,这样当该视图可见时,其他内容无需移动来适应它。

要试验代码,请下载项目文件并在 Xcode 中打开示例。

第 1 部分

有条件地删除视图

您的设计中可能有一个登录屏幕,它在首次显示时不会显示错误消息,但在有人输错密码后会显示错误消息。用户名和密码字段不应根据错误消息是否可见而移动位置。使用值为 0 的 opacity(_😃 修饰符,以便布局能够显示错误消息,无论它是否可见。您还可以使用此策略移除不影响其他视图位置的视图,例如 overlay(alignment: content:) 修饰符内的视图。

Two wireframes of a login screen. Each screen has user name and password fields, and login button. The second screen also has an error message between the password field and login button. The data entry fields and button are in the same positions on both screens. 或者,您可能有一个订单 Form ,如果用户选择不使用相同的收货地址和账单地址,则会显示第二组地址字段。对于地址字段等用户可能需要滚动浏览的内容,请使用 if 语句,仅在内容可见时为其留出空间,并在其他内容出现和消失时进行移动。

如果您需要根据视图的测量在布局中保留空间,但又不想显示该视图,则可以使用 hidden() 修饰符。

VoiceOver 和手势识别器也会忽略您以任何方式删除的视图。

为了展示这些方法之间的差异,此示例使用了一系列火车车厢。每列火车都有三个视图——前部、中部和后部——并使用 SF Symbols 中的火车车厢符号。对于长列车,前部、中部和后部车厢均会显示。对于短列车,中间车厢不会显示。定义每列火车的代码使用不同的技术来省略中间车厢。

步骤 1

在这些示例中, longer Train 属性跟踪是否显示或隐藏中间的火车车厢。

在完整的应用程序中,确定是否隐藏视图的数据可能是 Binding 或 Environment 值。

import SwiftUI


struct IfElseTrain: View {
    var longerTrain: Bool
    
    var body: some View {
        VStack {
            HStack {
                Image(systemName: "train.side.rear.car")
                if longerTrain {
                    Image(systemName: "train.side.middle.car")
                }
                Image(systemName: "train.side.front.car")
            }
            Divider()
        }
    }
}


struct IfElseTrain_Previews: PreviewProvider {
    static var previews: some View {
        IfElseTrain(longerTrain: true)
        IfElseTrain(longerTrain: false)
    }
}

第 2 步

第一列火车使用条件句 if 来控制中间车厢。当 longer Train 为真时,中间车厢是火车的一部分。当 longer Train 为假时,中间车厢不存在,其他车厢之间的距离更近。

你也可以以同样的方式使用 else 子句。只有当条件为假时, else 子句的内容才有效。

步骤3

第二列火车使用 opacity(_😃 修饰符来控制中间车厢的可见性。当 longer Train 为真时,中间车厢是火车的一部分,看起来就像上一个条件示例一样。但当 longer Train 为假时,中间车厢仍然占据这列火车的空间。

当您不希望其他内容随着视图出现或消失而移动时,请使用 opacity 修改器。