SwiftUI中List嵌套ForEach后无法维持水平布局且onMove失效问题

问题根源 #

SwiftUI的List默认采用垂直滚动布局，直接用List包裹ForEach会强制元素垂直排列；若将List嵌套在HStack中，onMove的拖拽交互会因为容器层级问题无法正常触发。

解决方案 #

通过修改List的滚动方向为水平，同时调整容器嵌套结构，既能维持水平布局，又能正常启用拖拽排序功能：

var body: some View {
    List {
        HStack(alignment: .top) {
            ForEach(taskLists, id: \.self) { list in
                VStack(alignment: .leading) {
                    TaskListView(list: list)
                        .padding(10)
                }
            }
            .onMove { indices, newOffset in
                // 执行实际的数组排序逻辑
                taskLists.move(fromOffsets: indices, toOffset: newOffset)
                print("mooooooooove")
            }
        }
    }
    .scrollDirection(.horizontal)
    .listStyle(.plain)
}

关键说明 #

• scrollDirection(.horizontal)：将List的滚动和布局方向改为水平，让内部的HStack能正常排列元素
• listStyle(.plain)：移除List默认的分组样式，避免额外的间距和背景干扰水平布局
• 确保taskLists是可绑定/可修改的数据源（比如用@State或@Binding修饰），否则拖拽后数据不会同步更新

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