我有一个视图(Form
),基本上,该视图具有一个选择器和可以由用户重新安排的项目列表。我希望该列表始终是可编辑的,因此用户不必点击 Edit 按钮(对于我来说,只有一个 Edit 按钮影响表单的一小部分。
通过设置环境变量editMode
:.environment(\.editMode, .constant(.active))
,我成功进行了上述总是在线编辑。
问题在于,尽管表单是可编辑的,但选择器停止工作(即,当您点击该表单时,它不会切换到选项列表)。
这是重现我的问题的MCVE:
import SwiftUI
struct SampleView: View {
enum SortBy: String, CaseIterable {
case FirstName
case LastName
var name: String {
switch (self) {
case .FirstName:
return "First name"
case .LastName:
return "Last name"
}
}
}
@State var sortBy = SortBy.FirstName
var body: some View {
Form {
Section(header: Text("General")) {
Picker("Sort by", selection: $sortBy) {
ForEach(SortBy.allCases, id: \.self) { sortBy in
Text(sortBy.name).tag(sortBy)
}
}
}
Section(header: Text("Phone order")) {
ForEach(1..<10) { number in
Text("\(number)")
}
.onMove(perform: onMove)
.padding(.leading, -39) // remove space dedicated to delete button
}
}
.environment(\.editMode, .constant(.active)) // <--
.navigationBarTitle(Text("Sample View"))
}
private func onMove(source: IndexSet, destination: Int) {
// ...
}
}
struct SampleView_Previews: PreviewProvider {
static var previews: some View {
NavigationView {
SampleView()
}
}
}
很明显,我可以吃掉我的文字并带回编辑按钮,但是我想知道是否有什么方法可以使列表可编辑并让选择器正常工作。
我已经看过this other question,但不能解决问题。
我了解该问题与以下事实有关:编辑导航链接时被禁用了。
由于editMode
是表单的属性,因此我尝试的一个选项是使用两个单独的表单创建一个VStack
,因此只有列表中的一个是可编辑的。问题是我无法设法获得正确的布局,更不用说我以两个可滚动区域结尾。
另一个想法是使用onTapGesture
手动导航到选择器的列表,但是我还没有找到如何使用SwiftUI进行操作。
到目前为止,我唯一的解决方案是将选择器的样式更改为SegmentedPickerStyle
,但是当排序选项(枚举)增加时,它就不会很有用。
答案 0 :(得分:1)
目前看来,这种组合目前是不可能的...在下面的替代解决方案的拟议变体中找到-这个想法是使用仅节内按钮激活重新排序
@State private var reorderMode: EditMode = .inactive
var body: some View {
Form {
Section(header: Text("General")) {
Picker("Sort by", selection: $sortBy) {
ForEach(SortBy.allCases, id: \.self) { sortBy in
Text(sortBy.name).tag(sortBy)
}
}
}
Section(header:
HStack {
Text("Phone order")
Spacer()
Button(self.reorderMode == .inactive ? "Reorder" : "Done") {
self.reorderMode = self.reorderMode == .active ? .inactive : .active
}
}
) {
ForEach(1..<10) { number in
Text("\(number)")
}
.onMove(perform: onMove)
.padding(.leading, self.reorderMode == .active ? -39 : 0) // remove space dedicated to delete button
}
}
.environment(\.editMode, $reorderMode)
.navigationBarTitle(Text("Sample View"))
}