SwiftUI List反向列表：如何修正翻转后Section的头部位置？

我实现了一个从下到上加载的反向列表，除Section外功能正常。翻转Section后，头部仍停留在底部，需要将Section头部移至上方，下方对应展示单元格。期望效果如图：

原问题代码 #

VStack {
    List {
        ForEach(messagesViewModel.processedMessages, id: \.self) { section in
            Section(header: Text(section.date.relativeFormat!)
                .frame(maxWidth: .infinity, alignment: .center)
                ) {
                    ForEach(section.messages, id: \.self) { item in
                                       SUIMessageCell(data: item, avatar: messagesViewModel.metaData!.av96, viewModel: messagesViewModel)
                                           .listRowInsets(.init(top: 2, leading: 24, bottom: 2, trailing: 24))
                                           .listRowBackground(Color(UIColor(hexString: "#F2F3F4")))
                                           .modify {
                                               if #available(iOS 15.0, *) {
                                                   $0.listRowSeparator(.hidden)
                                               }
                                           }
                                   }
                }
                .rotationEffect(.radians(.pi))
                .scaleEffect(x: -1, y: 1, anchor: .center)
                
        }
    }
    .listStyle(.plain)
    .rotationEffect(.radians(.pi))
    .scaleEffect(x: -1, y: 1, anchor: .center)
    .environment(\.defaultMinListRowHeight, 0)
    .onAppear {
        UITableView.appearance().separatorStyle = .none
    }
    .padding(.bottom, 8)
    .background(Color(UIColor(hexString: "#F2F3F4")))
    
    SUIMessagesInputView(messageViewModel: messagesViewModel)
}

问题分析 #

原代码的核心问题是对整个Section（包括头部）执行了翻转操作，导致Section头部的位置被颠倒，无法正常显示在分组上方。同时整个List的翻转也加剧了布局混乱。

解决方案1：调整翻转层级（仅翻转单元格） #

只对Section内的单元格容器进行翻转，保持Section头部的正常布局，同时保留List的整体翻转以实现从下到上的加载效果：

VStack {
    List {
        ForEach(messagesViewModel.processedMessages, id: \.self) { section in
            Section(header: Text(section.date.relativeFormat!)
                .frame(maxWidth: .infinity, alignment: .center)
            ) {
                // 仅翻转单元格所在的容器，不影响Section头部
                LazyVStack {
                    ForEach(section.messages, id: \.self) { item in
                        SUIMessageCell(data: item, avatar: messagesViewModel.metaData!.av96, viewModel: messagesViewModel)
                            .listRowInsets(.init(top: 2, leading: 24, bottom: 2, trailing: 24))
                            .listRowBackground(Color(UIColor(hexString: "#F2F3F4")))
                            .modify {
                                if #available(iOS 15.0, *) {
                                    $0.listRowSeparator(.hidden)
                                }
                            }
                    }
                }
                .rotationEffect(.radians(.pi))
                .scaleEffect(x: -1, y: 1, anchor: .center)
            }
            // 移除Section级别的翻转
        }
    }
    .listStyle(.plain)
    .rotationEffect(.radians(.pi))
    .scaleEffect(x: -1, y: 1, anchor: .center)
    .environment(\.defaultMinListRowHeight, 0)
    .onAppear {
        UITableView.appearance().separatorStyle = .none
    }
    .padding(.bottom, 8)
    .background(Color(UIColor(hexString: "#F2F3F4")))
    
    SUIMessagesInputView(messageViewModel: messagesViewModel)
}

解决方案2：反转数据源（更优，避免视图翻转） #

直接通过反转数据源顺序实现从下到上的加载效果，完全不需要视图翻转，从根源上避免布局异常：

VStack {
    List {
        // 反转分组顺序，让最新的分组显示在列表底部
        ForEach(messagesViewModel.processedMessages.reversed(), id: \.self) { section in
            Section(header: Text(section.date.relativeFormat!)
                .frame(maxWidth: .infinity, alignment: .center)
            ) {
                // 反转当前分组内的消息顺序，让最新消息显示在分组底部
                ForEach(section.messages.reversed(), id: \.self) { item in
                    SUIMessageCell(data: item, avatar: messagesViewModel.metaData!.av96, viewModel: messagesViewModel)
                        .listRowInsets(.init(top: 2, leading: 24, bottom: 2, trailing: 24))
                        .listRowBackground(Color(UIColor(hexString: "#F2F3F4")))
                        .modify {
                            if #available(iOS 15.0, *) {
                                $0.listRowSeparator(.hidden)
                            }
                        }
                }
            }
        }
    }
    .listStyle(.plain)
    .environment(\.defaultMinListRowHeight, 0)
    .onAppear {
        UITableView.appearance().separatorStyle = .none
        // 初始滚动到列表底部，显示最新消息
        DispatchQueue.main.async {
            UITableView.appearance().scrollToBottom()
        }
    }
    .padding(.bottom, 8)
    .background(Color(UIColor(hexString: "#F2F3F4")))
    
    SUIMessagesInputView(messageViewModel: messagesViewModel)
}

方案说明 #

• 方案1适合需要保留现有翻转逻辑的场景，通过缩小翻转范围修复Section头部位置
• 方案2是更推荐的做法，通过数据源反转替代视图翻转，逻辑更清晰，避免翻转带来的布局冲突和性能损耗，同时Section头部自然位于分组上方，完全符合需求

内容的提问来源于stack exchange，提问作者grzeg123