文本不适合时的 SWIFTUI Marquee [英] SWIFTUI Marquee when text not fit

问题描述

我有文字，但不合适.当文本不适合我的默认框架时，我想使用选取框.

I have text but it's not fit. I want use marquee when text not fit in my default frame.

Text(self.viewModel.soundTrack.title)
    .font(.custom("Avenir Next Regular", size: 24))
    .multilineTextAlignment(.trailing)
    .lineLimit(1)
    .foregroundColor(.white)
    .fixedSize(horizontal: false, vertical: true)
    //.frame(width: 200.0, height: 30.0)

推荐答案

试试下面的代码....

Try below code....

在 MarqueeText.swift 中

In MarqueeText.swift

import SwiftUI

struct MarqueeText: View {

    @State private var leftMost = false

    @State private var w: CGFloat = 0

    @State private var previousText: String = ""

    @State private var contentViewWidth: CGFloat = 0

    @State private var animationDuration: Double = 5

    @Binding var text : String

    var body: some View {
        let baseAnimation = Animation.linear(duration: self.animationDuration)//Animation duration
        let repeated = baseAnimation.repeatForever(autoreverses: false)
        return VStack(alignment:.center, spacing: 0) {
            GeometryReader { geometry in//geometry.size.width will provide container/superView width
                Text(self.text).font(.system(size: 24)).lineLimit(1).foregroundColor(.clear).fixedSize(horizontal: true, vertical: false).background(TextGeometry()).onPreferenceChange(WidthPreferenceKey.self, perform: {
                    self.w = $0
                    print("textWidth:\(self.w)")
                    print("geometry:\(geometry.size.width)")
                    self.contentViewWidth = geometry.size.width
                    if self.text.count != self.previousText.count && self.contentViewWidth < self.w {
                        let duration = self.w/50
                        print("duration:\(duration)")
                        self.animationDuration = Double(duration)
                        self.leftMost = true
                    } else {
                        self.animationDuration = 0.0
                    }
                    self.previousText = self.text
                    }).fixedSize(horizontal: false, vertical: true)// This Text is temp, will not be displayed in UI. Used to identify the width of the text.
                if self.animationDuration > 0.0 {
                    Text(self.text).font(.system(size: 24)).lineLimit(nil).foregroundColor(.green).fixedSize(horizontal: true, vertical: false).background(TextGeometry()).onPreferenceChange(WidthPreferenceKey.self, perform: { _ in
                                    if self.text.count != self.previousText.count && self.contentViewWidth < self.w {

                                    } else {
                                        self.leftMost = false
                                    }
                                    self.previousText = self.text
                        }).modifier(self.makeSlidingEffect().ignoredByLayout()).animation(repeated, value: self.leftMost).clipped(antialiased: true).offset(y: -8)//Text with animation
                }
                else {
                    Text(self.text).font(.system(size: 24)).lineLimit(1).foregroundColor(.blue).fixedSize(horizontal: true, vertical: false).background(TextGeometry()).fixedSize(horizontal: false, vertical: true).frame(maxWidth: .infinity, alignment: .center).offset(y: -8)//Text without animation
                }
            }
            }.fixedSize(horizontal: false, vertical: true).layoutPriority(1).frame(maxHeight: 50, alignment: .center).clipped()

    }


    func makeSlidingEffect() -> some GeometryEffect {
      return SlidingEffect(
        xPosition: self.leftMost ? -self.w : self.w,
        yPosition: 0).ignoredByLayout()
    }
}

struct MarqueeText_Previews: PreviewProvider {
    @State static var myCoolText = "myCoolText"
    static var previews: some View {
        MarqueeText(text: $myCoolText)
    }
}

struct SlidingEffect: GeometryEffect {
    var xPosition: CGFloat = 0
    var yPosition: CGFloat = 0

  var animatableData: CGFloat {
    get { return xPosition }
    set { xPosition = newValue }
  }

  func effectValue(size: CGSize) -> ProjectionTransform {
    let pt = CGPoint(
      x: xPosition,
      y: yPosition)
    return ProjectionTransform(CGAffineTransform(translationX: pt.x, y: pt.y)).inverted()
  }
}

struct TextGeometry: View {
    var body: some View {
        GeometryReader { geometry in
            return Rectangle().fill(Color.clear).preference(key: WidthPreferenceKey.self, value: geometry.size.width)
        }
    }
}

struct WidthPreferenceKey: PreferenceKey {
    static var defaultValue = CGFloat(0)

    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = nextValue()
    }

    typealias Value = CGFloat
}

struct MagicStuff: ViewModifier {
    func body(content: Content) -> some View {
        Group {
            content.alignmentGuide(.underlineLeading) { d in
                return d[.leading]
            }
        }
    }
}

extension HorizontalAlignment {
    private enum UnderlineLeading: AlignmentID {
        static func defaultValue(in d: ViewDimensions) -> CGFloat {
            return d[.leading]
        }
    }
    static let underlineLeading = HorizontalAlignment(UnderlineLeading.self)
}

在您现有的 SwiftUI 结构中.(下面的示例代码将检查3种情况1.空字符串，2.不需要选框的短字符串，3.长选框字符串)

In your existing SwiftUI struct. (The below sample code will check 3 cases 1.Empty string, 2.Short string that doesn't need to marquee, 3.Lengthy marquee string)

@State var value = ""
@State var counter = 0

var body: some View {
    VStack {
        Spacer(minLength: 0)
        Text("Monday").background(Color.yellow)
        HStack {
            Spacer()
            VStack {
                Text("One").background(Color.blue)
            }
            VStack {
            MarqueeText(text: $value).background(Color.red).padding(.horizontal, 8).clipped()
            }
            VStack {
            Text("Two").background(Color.green)
            }
            Spacer()

        }
        Text("Tuesday").background(Color.gray)
        Spacer(minLength: 0)
        Button(action: {
            self.counter = self.counter + 1
            if (self.counter % 2 == 0) {
                self.value = "1Hello World! Hello World! Hello World! Hello World! Hello World!"
            } else {
                self.value = "1Hello World! Hello"
            }
        }) {
            Text("Button")
        }
        Spacer()
    }
}

这篇关于文本不适合时的 SWIFTUI Marquee的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！