你的需求是根据按钮操作切换图片的滑动方向，默认的.slide过渡没法做到这点，我们需要自定义过渡逻辑并结合状态判断来实现。下面是修改后的完整代码，我会一步步解释关键改动：

import SwiftUI

struct DetailView: View {
    @State private var image: Image?
    @State private var index: Int = 1
    // 新增：记录上一个索引，用来判断是前进还是后退
    @State private var previousIndex: Int = 1
    
    // 假设你的图片总数是10，可根据实际情况修改
    private let maxImageIndex = 10
    
    var body: some View {
        VStack {
            // 使用ZStack让新旧图片叠加，实现过渡动画
            ZStack {
                if let image = image {
                    image
                        .resizable()
                        .scaledToFit()
                        // 根据索引变化方向设置不同过渡
                        .transition(transitionForDirection())
                }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            
            HStack(spacing: 20) {
                Button("Previous", action: {
                    guard index > 1 else { return } // 边界判断，防止索引越界
                    previousIndex = index
                    index -= 1
                    // 包裹状态变化，确保动画触发
                    withAnimation(.easeInOut(duration: 0.5)) {
                        loadImage()
                    }
                })
                
                Button("Next", action: {
                    guard index < maxImageIndex else { return } // 边界判断
                    previousIndex = index
                    index += 1
                    withAnimation(.easeInOut(duration: 0.5)) {
                        loadImage()
                    }
                })
            }
            .padding()
        }
        .onAppear {
            loadImage()
        }
    }
    
    func loadImage() {
        let strname = String(format: "image%02d", index)
        image = Image(strname)
    }
    
    // 根据前进/后退方向返回对应的过渡效果
    private func transitionForDirection() -> AnyTransition {
        if index > previousIndex {
            // Next按钮：新图片从右侧滑入，旧图片滑出左侧
            return .asymmetric(
                insertion: .move(edge: .trailing).combined(with: .opacity),
                removal: .move(edge: .leading).combined(with: .opacity)
            )
        } else {
            // Previous按钮：新图片从左侧滑入，旧图片滑出右侧
            return .asymmetric(
                insertion: .move(edge: .leading).combined(with: .opacity),
                removal: .move(edge: .trailing).combined(with: .opacity)
            )
        }
    }
}

struct DetailView_Previews: PreviewProvider {
    static var previews: some View {
        DetailView()
    }
}

关键改动说明： #

1. 新增previousIndex状态：用来记录上一次的图片索引，通过对比当前index和previousIndex，判断用户是点击了Next还是Previous按钮。
2. ZStack容器：过渡动画需要新旧视图同时存在才能生效，ZStack可以让两张图片叠加在一起，避免切换时出现空白。
3. 自定义不对称过渡：使用AnyTransition.asymmetric分别定义插入（新图片进入）和移除（旧图片退出）的动画方向，完美匹配你的需求：
   • 点击Next时，新图片从右侧滑入，旧图片向左滑出
   • 点击Previous时，新图片从左侧滑入，旧图片向右滑出
4. withAnimation包裹状态更新：确保索引变化和图片加载时，动画能正确触发，替代原来的.animation(.default)修饰符，这样动画的触发时机更可控。
5. 边界判断：防止索引超出图片的实际范围（比如不能小于1或者大于你的图片总数），避免加载不存在的图片。

这样修改后，就能实现你想要的方向可控的滑动动画效果了。

内容的提问来源于stack exchange，提问作者abcom