swift 浮动文本字段垂直轴？,

z9smfwbn 于 2023-06-21 发布在 Swift

关注(0)|答案(2)|浏览(148)

我有一个动画浮动文本字段，适用于水平轴。我想修改相同的一个，所以它可以同时支持水平和垂直轴。目前，所使用的偏移量和动画效果对于水平线看起来很好，但不能处理.vertical轴的动态特性。

floatingTextField的代码如下：

import SwiftUI

struct FloatingTextField: View {
    let title: String
    @Binding var text: String
    var axis: Axis = .horizontal
    
    var body: some View {
        ZStack(alignment: .leading) {
            Text(title)
                .foregroundColor(text.isEmpty ? Color(.placeholderText) : .accentColor)
                .offset(y: text.isEmpty ? 0 : -25)
                .scaleEffect(text.isEmpty ? 1 : 0.75, anchor: .leading)
            TextField("", text: $text, axis: axis)
        }
        .padding(.top, 15)
        .animation(.spring(response: 0.4, dampingFraction: 0.3), value: text)
    }
}

它的用法可以在下面的代码块中看到：

FloatingTextField(title: "Address", text: item.location.address)
FloatingTextField(title: "Notes", text: item.notes, axis: .vertical)

我希望.horizontal保持相同的感觉和功能，但我非常希望.vertical也能像预期的那样工作。

swift

来源：https://stackoverflow.com/questions/76426271/floating-textfield-vertical-axis

2条答案

按热度按时间

pobjuy321#

我真的不能告诉你为什么它会起作用，但它确实起作用了。

import SwiftUI

struct FloatingTextField: View {
let title: String
@Binding var text: String
var axis: Axis = .horizontal

var body: some View {
    ZStack(alignment: .leading) {
        GeometryReader { geo in
            Text(title)
                .foregroundColor(text.isEmpty ? Color(.placeholderText) : .accentColor)
                .offset(y: text.isEmpty ? 5 : -20)
                .scaleEffect(text.isEmpty ? 1 : 0.75, anchor: .leading)
        }
        TextField("", text: $text, axis: axis)
            .lineLimit(5)
    }
    .padding(.top, 15)
    .animation(.spring(response: 0.4, dampingFraction: 0.3), value: text)
}
}

赞(0）回复(0）举报 2023-06-21

ki0zmccv2#

好的，你做的一切都是正确的，但你只错过了ZStack的对齐
将ZStack(alignment: .leading)更改为ZStack(alignment: .topLeading)

赞(0）回复(0）举报 2023-06-21