如何更改可编辑列表中重新排序图标的颜色？

Question

我有一个可编辑的列表，其中可以重新订购哪些商品。我想更改重新排序颜色。如何做到这一点？

struct DummyList: View {
    @State private var items = ["item 1", "item 2", "item 3"]
    @State private var editMode = EditMode.active
    
    var body: some View {
        List {
            ForEach(items, id: \.self) { item in
                Text(item)
            }
            .onMove(perform: move)
        }
        .toolbar {
            EditButton()
        }
        .environment(\.editMode, $editMode)
    }

    func move(from source: IndexSet, to destination: Int) {
        items.move(fromOffsets: source, toOffset: destination)
    }
}

Answer 1

我不确定是否可以更改重新排序按钮的前景色。但是，您至少可以使用

listRowBackground

:

更改其背后的背景

ForEach(items, id: \.self) { item in
    Text(item)
}
.onMove(perform: move)
.listRowBackground(
    Color(UIColor.secondarySystemGroupedBackground)
        .overlay(alignment: .trailing) {
            Color.orange
                .frame(width: 44)
                .clipShape(RoundedRectangle(cornerRadius: 6))
                .padding(.vertical, 4)
                .padding(.trailing, 10)
        }
)

事实证明，该按钮使用半透明的灰色阴影显示，因此背景为按钮本身添加了色调效果：

以这种方式在按钮后面设置形状有点像在辅助功能设置中打开按钮形状时所看到的。不过，它不会冲突，因为当设置打开时，重新排序按钮似乎不会改变其外观。

当然，这种效果可能会受到iOS未来版本设计变更的影响。因此，您可能希望将其使用限制为您已经测试过的版本。