如何在SwiftUI中从右向左滚动视图布局方向?

vc9ivgsu  于 2023-08-02  发布在  Swift
关注(0)|答案(3)|浏览(147)

如何在swiftUI的Horizontal ScrollView中设置从右到左的布局方向?
就像这样:

ScrollView(showsHorizontalIndicator: false) {
    HStack {
        VStack {
            Image("1")
            Text("one")
        }
        VStack {
            Image("2")
            Text("two")
        }
        VStack {
            Image("3")
            Text("three")
        }
    }
}

字符串
因此,当模拟器运行时,我希望在右侧看到Image("1"),然后向右滑动以访问Image("3")

rryofs0p

rryofs0p1#

你可以通过在下面给出view的修饰符,使你想要的任何view从右到左:

.flipsForRightToLeftLayoutDirection(true)
.environment(\.layoutDirection, .rightToLeft)

字符串
在你的情况下,它将是这样的:

ScrollView(showsHorizontalIndicator: false) {
    HStack {
        VStack {
            Image("1")
            Text("one")
        }
        VStack {
            Image("2")
            Text("two")
        }
        VStack {
            Image("3")
            Text("three")
        }
    }
}
.flipsForRightToLeftLayoutDirection(true)
.environment(\.layoutDirection, .rightToLeft)


好运dadash ;)

wkftcu5l

wkftcu5l2#

你也可以使用我的助手。

import SwiftUI

struct ScrollViewRTL<Content: View>: View {
  @ViewBuilder var content: Content
  @Environment(\.layoutDirection) private var layoutDirection
  var type: RowType
   
  init(type: RowType, @ViewBuilder content: () -> Content) {
    self.type = type
    self.content = content()
  }
   
  @ViewBuilder var body: some View {
    ScrollView(type.scrollAxis, showsIndicators: false) {
      content
        .rotation3DEffect(Angle(degrees: layoutDirection == .rightToLeft ? -180 : 0), axis: (
          x: CGFloat(0),
          y: CGFloat(layoutDirection == .rightToLeft ? -10 : 0),
          z: CGFloat(0)))
       
    }
    .rotation3DEffect(Angle(degrees: layoutDirection == .rightToLeft ? 180 : 0), axis: (
      x: CGFloat(0),
      y: CGFloat(layoutDirection == .rightToLeft ? 10 : 0),
      z: CGFloat(0)))
  }
}

public enum RowType {
  case hList
  case vList
   
  var scrollAxis: Axis.Set {
    switch self {
    case .hList:
      return .horizontal
       
    case .vList:
      return .vertical
    }
  }
}

字符串

pnwntuvh

pnwntuvh3#

import SwiftUI
import Introspect

struct HorizontalScrollView<Content: View>: View {
    
    private let content: Content
    private let spacing: CGFloat
    private let showsIndicators: Bool
    
    init(showsIndicators: Bool = false, spacing: CGFloat = 8, @ViewBuilder content: () -> Content) {
        self.spacing = spacing
        self.showsIndicators = showsIndicators
        self.content = content()
    }
    
    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            HStack(alignment: .center, spacing: spacing) {
                if UIDevice.isAvailable16_4 {
                    content
                } else {
                    content
                        .rotation3DEffect(Angle(degrees: 180), axis: (x: CGFloat(0), y: CGFloat(10), z: CGFloat(0)))
                }
            }
            .padding([.trailing, .leading], .len16)
        }
        .introspectScrollView { scrollView in
            scrollView.alwaysBounceHorizontal = false
        }
        .flipsForRightToLeftLayoutDirection(!UIDevice.isAvailable16_4)
        .environment(\.layoutDirection, .rightToLeft)
    }
    
}

extension UIDevice {
    
    static var isAvailable16_4: Bool {
        if #available(iOS 16.4, *) {
            return true
        }
        return false
    }
    
}

字符串
用途:

HorizontalScrollView {
    ForEach(viewModel.categories) { category in
        StoryCategoryItemView(viewModel: .init(category, categories: viewModel.categories))
    }
}

相关问题