Swiftui 列表中的编辑模式

Swiftui 列表中的编辑模式,swiftui,Swiftui,使用工作代码更新 我在我的应用程序中使用编辑模式实现了一个列表,因此我可以通过拖动行句柄来移动行。这很好,但看起来不太好,因为移动图标位于行的内容下(请参见屏幕转储)。这是因为编辑模式为删除按钮留出了空间 在编辑模式下,是否有方法隐藏行中的元素 视图的代码为: import SwiftUI import Combine import DateHelper struct EggList: View { @EnvironmentObject var egg : Egg @Sta

使用工作代码更新

我在我的应用程序中使用编辑模式实现了一个列表,因此我可以通过拖动行句柄来移动行。这很好,但看起来不太好,因为移动图标位于行的内容下(请参见屏幕转储)。这是因为编辑模式为删除按钮留出了空间

在编辑模式下,是否有方法隐藏行中的元素

视图的代码为:

import SwiftUI
import Combine
import DateHelper

struct EggList: View {

    @EnvironmentObject var egg : Egg
    @State private var eggs = Egg.all()

    @State private var editMode: EditMode = .inactive

    var body: some View {

        NavigationView {

            List {

                Image("Pantanal")
                    .resizable()
                    .frame(height: 250)

                ForEach(eggs) { eggItem in
                    NavigationLink(destination: EggDayList(eggItem: eggItem)) {
                        CellRow(eggItem: eggItem)
                        .environment(\.editMode, self.$editMode)
                    }
                 }
                .onDelete(perform: delete)
                .onMove(perform: move)
            }

            .navigationBarTitle(Text("Eggs"), displayMode: .inline)
            .navigationBarItems(leading: EditButton(), trailing: NavigationLink(destination: Settings()){
                Text("Add Egg")})
            .environment(\.editMode, self.$editMode)
        }
    }
    func delete(at offsets: IndexSet) {
        eggs.remove(atOffsets: offsets)
    }
    func move(from source: IndexSet, to destination: Int) {
        eggs.move(fromOffsets: source, toOffset: destination)
    } 

}

struct CellRow: View {

    let eggItem: Egg
    @Environment(\.editMode) private var editMode

    var body: some View {

        HStack(spacing: 8) {

            Image(eggItem.species)
                .resizable()
                .frame(width: 48, height: 48)
                .clipShape(Circle())

            VStack(alignment: .leading, spacing: 0) {
                Text("\(eggItem.species)")
                    .font(.footnote)
                    .lineLimit(1)
                    .padding(.top, -4)

                Text("id-"+String(eggItem.eggNumber))
                    .font(.footnote)
                    .lineLimit(1)
                    .padding(0)

                Text("\(eggItem.layDate.string(with: "dd-MM-yy"))")
                    .font(.footnote)
                    .lineLimit(1)
                    .padding(.bottom, -7)
            }.frame(width: 90, alignment: .leading)

            VStack(spacing: 2) {
                Text("days")
                    .font(.footnote)
                    .padding(.top, 12)
                Image(systemName: "\(eggItem.diffToday)"+".circle")
                    .resizable()
                    .frame(width: 40, height: 30)
                    .padding(.bottom, 12)
                    .foregroundColor(.red)
            }.frame(width: 50, alignment: .leading)

            VStack(spacing: 0) {
                Text("prediction")
                    .font(.footnote)
                    .padding(.top, 14)
                Text(formatVar1(getal: eggItem.calcWeights[eggItem.daysToPip-1].prediction)+"%")
                    .font(.title)
                    .padding(.bottom, 12)
            }.frame(width: 80, alignment: .leading)

            if !(self.editMode?.wrappedValue.isEditing ?? false) {
                VStack(alignment: .leading, spacing: 0) {
                    Text("INC")
                        .font(.footnote)
                        .lineLimit(1)
                        .padding(.top, -4)
                    Text("37.3")
                        .font(.footnote)
                        .lineLimit(1)
                        .padding(0)
                    Text("30%")
                        .font(.footnote)
                        .lineLimit(1)
                        .padding(.bottom, -7)
                }
                .frame(width: 30, alignment: .leading)
            }

            Spacer()

            VStack(alignment: .trailing, spacing: 0) {

                Image(systemName: "info.circle")
                    .resizable()
                    .frame(width: 22, height: 22)
                    .foregroundColor(.accentColor)
                    .onTapGesture(count: 1) {
                        print("action")
                }
            }

        }
        .listRowInsets(.init(top: 0, leading: 0, bottom: 0, trailing: 0))
        .frame(height: 46, alignment: .leading)
        .padding(0)
    }
}

为视图添加一个小扩展:

extension View {

    func isHidden(_ hidden: Bool) -> some View {
        if hidden {
            return AnyView(self.hidden())
        } else {
            return AnyView(self)
        }

    }

}
下一步将@Environment添加到您的CellRow:

@Environment(\.editMode) var editMode: Binding<EditMode>?

到您认为最不重要的堆栈之一。

您的问题是,
editMode
变量在按下edit按钮时不会改变。无论处于何种状态,在您的单元格行中,
editMode
变量始终返回
.inactive
。我不知道为什么,可能是个虫子。 我也有同样的问题,但我在这里发现了这个问题:,它使用了一种变通方法,将
editMode
环境值传递到一个私有
@State
变量中,该变量似乎工作得很好

因此,以下是您需要做的:

  • @State private var editMode:editMode=.inactive
    添加到您的EggList视图中。 这将创建一个状态变量,从现在起保持编辑模式

  • .navigationBarItems(…)
    之后的某处添加
    .environment(\.editMode,self.$editMode)
    。 这将
    EggList
    中的环境变量
    editMode
    设置为上述状态变量的绑定

  • 直接在
    单元格行(…)
    初始值设定项之后添加
    .environment(\.editMode,self.$editMode)
    。 这会将状态变量
    editMode
    插入到
    CellRow
    的环境中,可通过
    @environment(\.editMode)
    访问该变量

现在,您只需将其中一个元素包装在if语句中,即可在编辑模式下隐藏它:

if!self.editMode?.wrappedValue.isEditing??真的{
VStack(对齐:。前导,间距:0){
文本(“公司”)
.font(.footnote)
.lineLimit(1)
.padding(.top,-4)
案文(“37.3”)
.font(.footnote)
.lineLimit(1)
.填充(0)
文本(“30%”)
.font(.footnote)
.lineLimit(1)
.padding(.bottom,-7)
}
.帧(宽度:30,对齐:。前导)
}
或者,如果愿意,继续使用LuLuGaGa的
ishiden
扩展:
.ishiden(self.editMode?.wrappedValue.isEditing??false)

看起来您已经对元素的降级进行了硬编码,因此单元格无法调整大小进行编辑。可以在编辑时隐藏图元。你能分享一些代码吗?解释如何实现它会容易得多。按照要求…这听起来正是我想要的。。。但有些地方出了问题。当我点击“编辑”按钮时,我看到一个“重建”按钮,“编辑”按钮文本变为“完成”。就这样。。。我看不到行前面的删除图标,也看不到行句柄。带有.ishidden修饰符的堆栈仍然存在。我需要查看您的代码,以获取声明列表能够提供帮助的视图。我猜您的意思是:@State private var isEditMode:EditMode=.inactiveThanks以获得更正。但它仍然在.environment(\.editMode,self.$editMode)处抛出一个error.error。错误是类型为“EggList”的值没有成员“$editMode”。我明天可以自己测试它,看看是否也出现错误。我猜这是因为editMode私有变量仅在Cellrow结构中已知。而不是在EggList结构中?
.isHidden(editMode?.wrappedValue.isEditing ?? false)