SwiftUI：防止视图在 VStack 内展开

Posted 2023-02-24

【中文标题】SwiftUI：防止视图在 VStack 内展开

【英文标题】：SwiftUI: Prevent view being inside VStack to expand

【发布时间】：2019-12-05 15:43:08

【问题描述】：

我有这样的 VStack，里面有列表

 VStack(alignment: .leading, spacing: 16) 
                        Text("Contacts")
                            .font(.custom("AvenirNext-DemiBold", size: 20))
                            .foregroundColor(Color("DarkTitle"))
                            .padding(8).layoutPriority(1)

                        List(self.contacts)  contact in
                            ContactOption(contact: contact)
                                .padding(.horizontal, 4)
                         //.frame(height: 240)

  

此代码的问题在于，尽管只有 4 个联系人，但 List 会尝试尽可能多地扩展内容，从而占据整个屏幕。

我可以使用frame(height: 240)将此高度设置为固定值

我认为是否有可能强制 List 像 Text() 视图那样包装其内容。 即如果列表包装内容中有 4 行仅显示这 4 行，如果有 8 行扩展到这 8 行。然后我可以设置一些最大高度。 400 上面的 List 无法再展开，然后它将是可滚动的。

【问题讨论】：

我认为这是同一个问题***.com/questions/58060530/…

【参考方案1】：

好的，我尝试了一下，我不确定你是否可以使用它，但请检查一下：（只需点击添加和删除即可查看列表如何变大和变小）

struct ContactOption : View 

    var contact: String

    var body: some View 
        Text(contact)
    


struct ListView : View 

    var contacts: [String]

    var body : some View 

        //        List(self.contacts, id: \.self)  contact in
        //            ContactOption(contact: contact)
        //                .padding(.horizontal, 4)
        //        
        List 
            ForEach (contacts, id: \.self)  contact in
                Text (contact)
            
        
    


struct ContentView: View 

    @State var contacts = ["Chris", "Joe", "Carla", "another"]

    var body: some View 
        VStack() 
            HStack 
                Button("Add") 
                    self.contacts.append("dust")
                
                Button("Remove") 
                    self.contacts = self.contacts.dropLast()
                
            
            Text("Contacts")
                .foregroundColor(Color.blue)
                .padding(8).layoutPriority(1)

            Form 
                ListView(contacts: contacts)
                Section(footer: Text("hi")) 
                    Text("hi")
                
            

            Divider()
            Text("end list")
                .foregroundColor(Color.orange)

        
    

【讨论】：

什么是ListView