SwiftUI-VStack使子文本跨全宽

2024-05-19 • 问答

我正在尝试构建在Text中包含VStack的视图。我希望VStack填满屏幕的整个宽度，并且希望其中的Text能够做到这一点。据我所知，代码如下：

import SwiftUI

struct Test: View {
    @State private var text = "Hello,World!"

    var body: some View {
        VStack {
            Text(text)
                .frame(maxWidth: .infinity)
                .animation(.default)
            Button(action: {
                self.text = (self.text == "Text") ? "Hello,World!" : "Text"
            }) {
                Text("Toggle")
            }
        }
        .frame(maxWidth: .infinity)
    }
}

struct Test_Previews: PreviewProvider {
    static var previews: some View {
        Test()
    }
}

当我检查预览并将鼠标悬停在文本和堆栈上时，它正好显示了我的期望，Text是全角。但是，当我运行该应用程序并调试视图层次结构时，它显示Text框架已调整大小以适合文本。尽管通常我不会介意，但当文本更改为更长的副本时，它会导致动画显示椭圆。是否可以阻止Text调整大小以适合副本？

看起来很难/无法修复错误。

您可以暂时使用此替代方法，直到苹果为我们提供了更多视图边框和边界的权限

使用禁用的`TextField`代替`Text`：

TextField("",text: .constant(text))
    .multilineTextAlignment(.center)
    .disabled(true)
    .frame(maxWidth: .infinity)

_{请注意，这将按照您所描述的全角尺寸进行，但是您知道，不是可字符串化的动画，因此您不会看到动画，如果框架也没有变化。}

使用单独的对象并在它们之间褪色：

?奖励：平滑的淡入淡出动画。

struct ContentView: View {

    @State private var primaryText = "Hello,World!"
    @State private var alternativeText = "Text"
    @State private var isAlternative = false

    var body: some View {
        VStack {
            ZStack {
                Text(primaryText).opacity(isAlternative ? 0:1)
                Text(alternativeText).opacity(isAlternative ? 1:0)
            }.animation(.default)
            Button("Toggle") {
                self.isAlternative.toggle()
            }
        }
    }
}

您可以尝试其他动画，例如spring：

            Text(text)
            .frame(maxWidth: .infinity)
            .animation(.spring(response: 0.0,dampingFraction:0.2))

遇到同样的问题。最终得到了一个不错的解决方案，但确实解决了。请闭上眼睛。添加一些额外的空间可以解决调整大小的问题。：）

Text(on ? "Cooling" : "Off         ")

SwiftUI-VStack使子文本跨全宽

zhuyanjunhunan 回答：SwiftUI-VStack使子文本跨全宽

使用禁用的TextField代替Text：

使用单独的对象并在它们之间褪色：

大家都在问

使用禁用的`TextField`代替`Text`：