macos - QQ 音乐 macOS 客户端每日推荐的轮播图组件是怎么实现的？

Question

如题，QQ 音乐 macOS 客户端每日推荐的轮播图组件是怎么实现的？使用 SwiftUI 能编写类似的效果吗？关键的需求如下：

• 每一屏展示多张图片，可以左右滑动
• 根据窗口宽度的变化，轮播图里的图片会自动等比缩放
• 窗口宽度变化超过某个阈值，每一屏展示的图片数量也会相应增减

我是个 Swift 新手，但我询问了 ChatGPT、检索了 OverflowStack 都没找到比较合理的答案，自己实现了一个接近的版本，但很容易出问题（https://stackoverflow.com/a/79830687/13050251）。(答案已更新，现在版本已经比较鲁棒了）

我实现过程中遇到的问题主要在于，为了让一屏显示多个图片，就得获取父容器的宽度来计算每个图片的宽度，并根据给定的比例来计算图片高度。此时就不可避免的使用 GeometryReader 容器，但是 GeometryReader 的高度完全不受内部图片高度的影响，空间充足时它会撑开所有空间导致轮播图下面出现留白，空间不足时它会挤压轮播图的空间。

我在上面给出的例子（ https://stackoverflow.com/a/79830687/13050251）中使用了多个 PreferenceKey来报道子元素的高度然后设置父元素的高度，但这里会出现无限循环的问题，在某些场景下还用不了。

请问有没有做过类似需求的同学来指点一下，这种需求应该怎么实现？

Answer 1

终于实现了一个版本，从表现上看几乎完美符合需求。但感觉在 PreferenceKey 中设置 value 时进行非 0 判断的操作有些“邪修”，可是如果不这么做获取到的 width 会一直为 0。在运行过程中，Xcode 会给出警告，应该也和这里有关系，不知道影响有多大。

import SwiftUI

struct WidthPreferenceKey: PreferenceKey {
  static var defaultValue: CGFloat = 0
  static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
    let width = nextValue()
    if width > 0 {
      value = width
    }
  }
}

let testColors: [Color] = [
  .blue,
  .orange,
  .yellow,
  .green,
  .purple,
]

struct carousel2: View {
  var data: [Color]

  var itemRatio: CGFloat = 1.5
  var spacing: CGFloat = 10

  @State private var width: CGFloat = 0
  @State private var touchOffsetX: CGFloat = 0
  @State private var groupOffsetX: CGFloat = 0
  @State private var hovering: Bool = false
  @State var currentIndex: CGFloat = 0

  var pageSize: Int {
    width > 1000 ? 3 : 2
  }

  var itemWidth: CGFloat {
    (width - spacing * CGFloat(pageSize - 1)) / CGFloat(pageSize)
  }
  var itemHeight: CGFloat {
    itemWidth / itemRatio
  }

  func calcItemOffsetX(_ i: Int) -> CGFloat {
    CGFloat(i) * itemWidth + spacing * CGFloat(i)
  }

  let groupOffsetXUpper: CGFloat = 0
  var groupOffsetXLower: CGFloat {
    -CGFloat(data.count - pageSize) * (itemWidth + spacing)
  }

  func calcGroupOffsetX() -> CGFloat {
    let offsetX = -currentIndex * (itemWidth + spacing) + self.touchOffsetX
    return min(groupOffsetXUpper, max(groupOffsetXLower, offsetX))
  }

  var body: some View {
    ScrollView {
      HStack {
        Text("Header")
      }.padding(.vertical, 20).frame(maxWidth: .infinity).background(Color.gray)

      HStack(spacing: 0) {
        Image(systemName: "chevron.left").font(.system(size: 30))
          .opacity(!hovering ? 0 : currentIndex > 0 ? 1 : 0.2)
          .padding(.horizontal, 10)
          .contentShape(Rectangle())
          .gesture(
            TapGesture().onEnded {
              currentIndex -= 1
              currentIndex = max(0, min(CGFloat(self.data.count - self.pageSize), currentIndex))
              withAnimation(.interactiveSpring(response: 0.25, dampingFraction: 0.85)) {
                self.groupOffsetX = calcGroupOffsetX()
              }
            }
          )

        ZStack {

          ForEach(data.indices, id: \.self) { i in

            Rectangle()
              .foregroundStyle(testColors[i])
              .frame(maxWidth: itemWidth)
              .frame(height: itemHeight)
              .offset(x: calcItemOffsetX(i))
          }
        }
        .frame(maxWidth: .infinity, alignment: .leading)
        .offset(x: groupOffsetX)
        .contentShape(Rectangle())
        .gesture(
          DragGesture()
            .onChanged { value in
              self.touchOffsetX = value.translation.width
              self.groupOffsetX = calcGroupOffsetX()
            }
            .onEnded { value in

              currentIndex -= (value.translation.width / self.itemWidth).rounded()
              currentIndex = max(0, min(CGFloat(self.data.count - self.pageSize), currentIndex))
              self.touchOffsetX = 0
              withAnimation(.interactiveSpring(response: 0.25, dampingFraction: 0.85)) {
                self.groupOffsetX = calcGroupOffsetX()
              }
            }
        )
        .background(
          GeometryReader { geo in

            Color.clear

              .preference(key: WidthPreferenceKey.self, value: geo.size.width)
          }
        )
        .onPreferenceChange(WidthPreferenceKey.self) { width in
          self.width = width
        }.clipped().padding(0)

        Image(systemName: "chevron.right").font(.system(size: 30))
          .opacity(
            !hovering ? 0 : currentIndex < CGFloat(self.data.count - self.pageSize) ? 1 : 0.2
          )
          .padding(.horizontal, 10)
          .contentShape(Rectangle())
          .gesture(
            TapGesture().onEnded {
              currentIndex += 1
              currentIndex = max(0, min(CGFloat(self.data.count - self.pageSize), currentIndex))
              withAnimation(.interactiveSpring(response: 0.25, dampingFraction: 0.85)) {
                self.groupOffsetX = calcGroupOffsetX()
              }
            }
          )
      }
      .onHover { inside in
        hovering = inside
      }

      VStack {
        Text("Very long content").frame(maxWidth: .infinity).frame(height: 1000, alignment: .top)
          .padding().background(Color.gray)
      }

    }.frame(maxWidth: .infinity)
  }
}

struct DemoView: View {
  var body: some View {
    carousel2(data: testColors)
  }
}

#Preview {
  DemoView()
}