swiftUI 画廊中间选中稍微放大实现
时间: 2023-10-05 13:09:55 浏览: 50
实现SwiftUI画廊中间选中稍微放大的效果,你可以使用`scaleEffect`属性来对选中的图片进行缩放,同时使用`GeometryReader`来计算当前选中图片的位置,再结合`ScrollView`的`onScroll`回调函数来判断当前选中图片的索引。
下面是一个简单的示例代码,可以帮助你实现这个效果:
```swift
struct GalleryView: View {
let images: [String] // 图片数组
@State private var selectedImageIndex = 0 // 当前选中图片的索引
var body: some View {
GeometryReader { geo in
ScrollView(.horizontal, showsIndicators: false) {
HStack(spacing: 10) {
ForEach(0..<images.count) { index in
Image(images[index])
.resizable()
.scaledToFit()
.frame(height: geo.size.height * 0.7) // 设置图片高度
.scaleEffect(index == selectedImageIndex ? 1.2 : 1.0) // 缩放选中图片
.animation(.easeInOut(duration: 0.2)) // 添加动画效果
.onTapGesture {
selectedImageIndex = index // 更新选中图片索引
}
}
}
}
.content.offset(x: CGFloat(selectedImageIndex) * -geo.size.width * 0.3) // 滚动到选中图片的位置
.frame(width: geo.size.width, height: geo.size.height)
.onAppear {
selectedImageIndex = images.count / 2 // 设置默认选中中间的图片
}
.onScroll(perform: { value in
let index = Int(value.translation.width / (-geo.size.width * 0.3))
if index >= 0 && index < images.count {
selectedImageIndex = index // 更新选中图片索引
}
})
}
}
}
```
这段代码中,我们使用了`GeometryReader`获取当前视图的尺寸,然后在`ScrollView`中使用`HStack`来展示图片。在`Image`中,我们使用了`scaleEffect`属性来对选中的图片进行缩放,并使用`onTapGesture`来处理点击事件。在`ScrollView`中,我们使用`onScroll`回调函数来判断当前选中图片的索引,并使用`content.offset`属性来滚动到选中图片的位置。
希望这个代码对你有所帮助!