SwiftUI 自定义列表单元格 - 在 EditMode 中禁用水平 padding/shrink
SwiftUI Custom List Cell - disable horizontal padding/shrink in EditMode
我正在尝试在 SwiftUI 中创建自定义列表单元格,其中编辑模式下的拖动图标保留在单元格内。
默认情况下,列表进入编辑模式后,单元格会水平收缩,请为拖动手柄和删除按钮设置 space。
实际上添加 listRowBackground 可以解决问题,但我无法再添加 cornerRadius 和 padding。
现在发生了什么:
期望的行为:
有谁知道内省的技巧或解决方案如何实现?
示例代码:
struct ListInList: View {
@State var datas = ["Row 1", "Row 2", "Row 3"]
var body: some View {
NavigationView{
List{
ForEach(datas, id: \.self) { data in
HStack{
Text(data)
.frame(maxWidth: .infinity)
.padding()
}
.listRowSeparator(.hidden)
.listRowInsets(EdgeInsets())
.listRowBackground(Color.clear)
.ignoresSafeArea(edges: .horizontal)
.background(Color.gray.opacity(0.3))
.cornerRadius(10)
.deleteDisabled(true)
.padding(EdgeInsets(top: 8, leading: 16, bottom: 8, trailing: 16))
}
.onMove(perform: move)
}
.listStyle(.plain)
.toolbar{
ToolbarItem(placement: .navigationBarTrailing){
EditButton()
}
}
}
}
func move(from source: IndexSet, to destination: Int) {
datas.move(fromOffsets: source, toOffset: destination)
}
}
好的,我自己想出来了。
我完全忘记了 .listRowBackground() 可以接收视图。
所以对于面临同样问题的每个人:
List{
ForEach(datas, id: \.self) { data in
HStack{
Text(data)
.padding(.vertical,20)
}
.listRowSeparator(.hidden)
.listRowBackground(
Color.gray.opacity(0.3)
.cornerRadius(10)
.padding(.vertical, 8)
)
}
.onMove(perform: move)
}
.padding(.horizontal)
.listStyle(.plain)
我正在尝试在 SwiftUI 中创建自定义列表单元格,其中编辑模式下的拖动图标保留在单元格内。
默认情况下,列表进入编辑模式后,单元格会水平收缩,请为拖动手柄和删除按钮设置 space。
实际上添加 listRowBackground 可以解决问题,但我无法再添加 cornerRadius 和 padding。
现在发生了什么:
期望的行为:
有谁知道内省的技巧或解决方案如何实现?
示例代码:
struct ListInList: View {
@State var datas = ["Row 1", "Row 2", "Row 3"]
var body: some View {
NavigationView{
List{
ForEach(datas, id: \.self) { data in
HStack{
Text(data)
.frame(maxWidth: .infinity)
.padding()
}
.listRowSeparator(.hidden)
.listRowInsets(EdgeInsets())
.listRowBackground(Color.clear)
.ignoresSafeArea(edges: .horizontal)
.background(Color.gray.opacity(0.3))
.cornerRadius(10)
.deleteDisabled(true)
.padding(EdgeInsets(top: 8, leading: 16, bottom: 8, trailing: 16))
}
.onMove(perform: move)
}
.listStyle(.plain)
.toolbar{
ToolbarItem(placement: .navigationBarTrailing){
EditButton()
}
}
}
}
func move(from source: IndexSet, to destination: Int) {
datas.move(fromOffsets: source, toOffset: destination)
}
}
好的,我自己想出来了。 我完全忘记了 .listRowBackground() 可以接收视图。
所以对于面临同样问题的每个人:
List{
ForEach(datas, id: \.self) { data in
HStack{
Text(data)
.padding(.vertical,20)
}
.listRowSeparator(.hidden)
.listRowBackground(
Color.gray.opacity(0.3)
.cornerRadius(10)
.padding(.vertical, 8)
)
}
.onMove(perform: move)
}
.padding(.horizontal)
.listStyle(.plain)