恢复列表 SwiftUI 中的底部填充

Posted 2023-02-24

【中文标题】恢复列表 SwiftUI 中的底部填充

【英文标题】：Bottom padding in reverted List SwiftUI

【发布时间】：2019-10-23 05:49:25

【问题描述】：

在 SwiftUI 中继续研究 reverted List How to make List reversed in SwiftUI。

在还原列表中出现奇怪的间距，看起来像额外的 UITableView 页眉/页脚。

struct ContentView: View 
    @State private var ids = ["header", "test2"]
    @State private var text = "text"

    init() 
        UITableView.appearance().tableFooterView = UIView()
        UITableView.appearance().separatorStyle = .none
    

    var body: some View 
        ZStack (alignment: .bottomTrailing) 
            VStack 
                List 
                    ForEach(ids, id: \.self)  id in
                        Group 
                        if (id == "header") 
                            VStack 
                                Text("Test")
                                    .font(.largeTitle)
                                    .fontWeight(.heavy)
                                Text("header")
                                    .foregroundColor(.gray)
                            
                            .scaleEffect(x: 1, y: -1, anchor: .center)
                         else 
                            Text(id).scaleEffect(x: 1, y: -1, anchor: .center)
                        
                        
                    
                
                .scaleEffect(x:
                    1, y: -1, anchor: .center)
                    .padding(.bottom, -8)

                Divider()
                VStack(alignment: .leading) 
                    HStack 
                        Button(action: ) 
                            Image(systemName: "photo")
                                .frame(width: 60, height: 40)
                        

                        TextField("Message...", text: $text)
                            .frame(minHeight: 40)

                        Button(action: 
                            self.ids.insert(self.text, at:0 )
                        ) 
                            Image(systemName: "paperplane.fill")
                                .frame(width: 60, height: 40)
                        
                    
                    .frame(minHeight: 50)
                    .padding(.top, -13)
                    .padding(.bottom, 50)
                
                .foregroundColor(.secondary)
            
        
    

看起来并不重要，但在我更复杂的代码中，它显示了更多的间距。

【参考方案1】：

好的，原来这是另一个 SwiftUI 错误。

要绕过它，您应该将.offset(x: 0, y: -1) 添加到List。

工作示例：

struct ContentView: View 
    @State private var ids = ["header", "test2"]
    @State private var text = ""
    
    init() 
        UITableView.appearance().tableFooterView = UIView()
        UITableView.appearance().separatorStyle = .none
        UITableView.appearance().backgroundColor = .clear
    
    
    var body: some View 
        ZStack (alignment: .bottomTrailing) 
            VStack 
                List(ids, id: \.self)  id in
                    Group 
                        if (id == "header") 
                            VStack(alignment: .leading) 
                                Text("Test")
                                    .font(.largeTitle)
                                    .fontWeight(.heavy)
                                Text("header").foregroundColor(.gray)
                            
                         else 
                            Text(id)
                        
                    .scaleEffect(x: 1, y: -1, anchor: .center)
                
                .offset(x: 0, y: -1)
                    
                .scaleEffect(x: 1, y: -1, anchor: .center)
                .background(Color.red)
                
                Divider()
                VStack(alignment: .leading) 
                    HStack 
                        Button(action: ) 
                            Image(systemName: "photo").frame(width: 60, height: 40)
                        
                        
                        TextField("Message...", text: $text)
                        
                        Button(action: 
                            self.ids.append(self.text)
                        ) 
                            Image(systemName: "paperplane.fill").frame(width: 60, height: 40)
                        
                    
                
                .foregroundColor(.secondary)
            
        
    

请注意，我稍微更改了您的代码以使其更易于观察并且代码更少。

【讨论】：

当我将offset(y: -100) 应用到root ZStack 时问题仍然存在（需要显示键盘）cdn.lonje.com/resource/images/…

也许你需要this method来处理键盘。

这正是我正在做的，它为活跃的.offset(y: kGuardian.slide)提供了这个“神器”