SwiftUI垂直轴TextField应用.fixedSize()后完全折叠问题咨询

问题描述 #

iOS 16新增了TextField的axis参数，支持多行文本输入。但当为了让文本框适配输入文本宽度而添加.fixedSize()修饰符后，文本框会完全折叠，仅显示与内边距一致的红色边框，文本无法正常显示（该问题仅影响垂直轴的多行文本框，水平滚动的文本框不受影响）。

复现代码 #

struct ContentView: View {
    @State var enteredText: String = "Test Text"
    
    var body: some View {
        TextField("Testing", text: $enteredText, axis: .vertical)
            .padding()
            .fixedSize()
            .border(.red)
    }
}

原因分析 #

这不是功能故障，而是fixedSize()和垂直轴多行TextField的布局逻辑冲突导致的：

• .fixedSize()会强制视图仅占用内容所需的最小空间，不做扩展或收缩。
• 当TextField的axis设为.vertical时，它的默认布局逻辑是水平方向尽可能填充可用空间，垂直方向根据内容高度自适应。但添加.fixedSize()后，水平方向的约束被强制为内容最小宽度，而垂直轴的TextField在未明确指定宽度约束时，无法正确计算文本所需的水平空间，进而导致整个视图的尺寸计算异常，最终折叠成仅能容纳内边距的大小。

解决方法 #

要实现“适配文本宽度的多行TextField”，可以通过以下方式处理：

1. 明确指定最小宽度约束：给TextField添加frame(minWidth:)约束，确保水平方向有足够空间显示文本，同时保留垂直方向的自适应：

TextField("Testing", text: $enteredText, axis: .vertical)
    .padding()
    .frame(minWidth: 100) // 按需调整最小宽度
    .fixedSize(horizontal: false, vertical: true) // 仅垂直方向固定大小
    .border(.red)

2. 动态计算文本宽度：如果需要更精准的宽度适配，可以通过UILabel预计算文本所需宽度，再将该值作为TextField的宽度约束，这种方式适合对布局有极致要求的场景。

内容的提问来源于stack exchange，提问作者Alpheratz