简体   繁体   English

SwiftUI listRowBackground 不能动画?

[英]SwiftUI listRowBackground can't animate?

I'm trying to imitate the normal UITableView behavior of a cell hiliting when you tap it, and then fading out.我正在尝试模仿正常的 UITableView 行为,当您点击它时,它会停止,然后淡出。 I'm getting pretty close except:我已经很接近了,除了:

  • .background() doesn't fill the entire list cell, it just fits around the content. .background()不会填满整个列表单元格,它只是适合内容。
  • .listRowBackground() does fill the cell, but it doesn't animate. .listRowBackground()确实填充了单元格,但它没有动画。

Is there a way to animate a list row background?有没有办法为列表行背景设置动画?

Below is the source for full context.以下是完整上下文的来源。 As written, because listRowBackground doesn't animate, you never see the background change at all.正如所写,因为listRowBackground没有动画,所以您根本看不到背景变化。 If you change it to background instead, it animates as expected but doesn't fill the cell.如果您改为将其更改为background ,它会按预期进行动画处理,但不会填充单元格。

struct Profile {
    let name: String
    var selected: Bool
    var hilited: Bool = false
}

extension Profile: Identifiable {
    var id: String { name }
}

struct ProfilesPicker: View {
    @State var profiles: [Profile]

    var body: some View {
        List {
            ForEach(0..<profiles.count) { index in
                let profile = profiles[index]

                CheckCell(name: profile.name, checked: profile.selected)
                    // using .background() gets a proper fade but doesn't fill the cell
                    .listRowBackground(Color(profile.hilited ? UIColor.systemFill : UIColor.systemBackground))
                    .onTapGesture {
                        profiles[index].hilited = true
                        withAnimation(.easeIn) {
                            profiles[index].hilited = false
                            profiles[index].selected.toggle()
                        }
                    }
            }
        }
    }
}

struct CheckCell: View {
    let name: String
    let checked: Bool

    var body: some View {
        HStack {
            Text(name)
            Spacer()
            if checked {
                Image(systemName: "checkmark")
            }
        }
        .contentShape(Rectangle())
    }
}

Use delay and add animation to listRowBackground.使用延迟并将 animation 添加到 listRowBackground。

struct ProfilesPicker: View {
    @State var profiles: [Profile]
    
    var body: some View {
        List {
            ForEach(0..<profiles.count) { index in
                let profile = profiles[index]
                
                CheckCell(name: profile.name, checked: profile.selected)
                    .onTapGesture {
                        profiles[index].hilited = true
                        
                        DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) { //<==Here
                            profiles[index].hilited = false
                            profiles[index].selected.toggle()
                        }
                    }
                    .animation(.default)
                    .listRowBackground(Color(profile.hilited ? UIColor.systemFill : UIColor.systemBackground).animation(.easeInOut)) //<==Here
            }
        }
    }
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM