主页 / coding / 问题 / 79365448
Accepted
Gil
Asked: 2025-01-18 00:28:12 +0800 CST

HStack 中按钮出现的延迟

  • 772

我正在尝试让 HStack 中 5 个按钮上的标签一次出现一个，每个按钮之间间隔 1 秒。在我的代码中，它们全部同时出现。显然我没有正确使用 sleep。不确定我是否应该使用它。换句话说，我希望“A”出现，然后一秒钟后出现“B”等。

    HStack (spacing: 25) {
        ForEach(letters, id: \.self) { letter in
            Button {

            }
            label : {
                ZStack {
                    RoundedRectangle(cornerRadius: 15)
                        .fill(Color.blue.opacity(0.3))
                        .frame(width: 50, height: 50)
                    Text(letter)
                        .font(.largeTitle)
                        .foregroundColor(.black)
                }
            }
            .task {
                /// Delay of 1 second
                try? await Task.sleep(nanoseconds: 1_000_000_000)
            }
            
        }
    }

在此处输入图片描述

xcode

1 个回答

  1. Best Answer

    目前，您示例中的任务正在休眠 1 秒，但之后什么也没有发生。因此，目前该任务没有任何用处。

    要看到动画，需要改变状态。一种典型的技术是更新改变视图的状态变量。然后可以将此变化制作成动画。

    以下是实现交错动画的几种方法。在这两种情况下，字母的可见性都是通过改变不透明度来控制的。

    1. 同时触发所有动画，然后使用.delay交错方式触发各个动画

    @State private var isShowing = false

    HStack (spacing: 25) {
    ForEach(Array(letters.enumerated()), id: \.offset) { index, letter in
        Button {} label: {
            ZStack {
                // ...
            }
        }
        .opacity(isShowing ? 1 : 0)
        .animation(.easeInOut.delay((Double(index + 1) * 1.0)), value: isShowing)
    }
}
.onAppear {
    isShowing = true
}

    2..task(id:)用于增加计数器

    这种方法更接近于您在示例中所采用的方法：

    @State private var nVisibleLetters = 0

    HStack (spacing: 25) {
    ForEach(Array(letters.enumerated()), id: \.offset) { index, letter in
        Button {} label: {
            ZStack {
                // ...
            }
        }
        .opacity(nVisibleLetters > index ? 1 : 0)
        .animation(.easeInOut, value: nVisibleLetters)
    }
}
.task(id: nVisibleLetters) {
    try? await Task.sleep(for: .seconds(1))
    if nVisibleLetters < letters.count {
        nVisibleLetters += 1
    }
}

    两种情况下的动画看起来相同：

    动画片

    • 0

相关问题