SwiftUI表单TextField垂直对齐与尺寸调整问题求助

问题分析 #

当前表单中左侧Text文本长度不一致（如"OFF"、"Take OFF"），导致后续TimeInsertView的起始位置偏移；同时TimeInsertView内的TextField未设置固定尺寸，出现长短不一的情况，最终造成整体布局错位。

解决步骤 #

1. 统一左侧Text宽度，保证垂直对齐 #

给每个左侧的Text组件添加固定宽度约束，同时设置HStack的垂直对齐方式为.firstTextBaseline，确保所有行的组件基线对齐：

HStack(alignment: .firstTextBaseline) {
    Text("OFF")
        .foregroundStyle(.blue)
        .font(.footnote)
        .frame(width: 70, alignment: .leading) // 固定宽度，可根据实际需求调整数值
    
    TimeInsertView(...)
}

所有4行的左侧Text都应用相同的固定宽度，让后续的TimeInsertView在同一垂直位置起始。

2. 固定TextField尺寸，统一布局 #

修改TimeInsertView内部的TextField，添加固定宽高约束，同时设置文本对齐方式，确保每个TextField尺寸一致：
假设TimeInsertView的核心布局是包含两个TextField的HStack，修改如下：

struct TimeInsertView: View {
    // 现有属性省略...
    
    var body: some View {
        HStack(spacing: 16) { // 统一组件间距
            TextField("Local", text: $localTime)
                .frame(width: 80, height: 32) // 固定宽高
                .textFieldStyle(.roundedBorder)
                .textAlignment(.center)
            
            TextField("UTC", text: $utcTime)
                .frame(width: 80, height: 32) // 与左侧TextField尺寸保持一致
                .textFieldStyle(.roundedBorder)
                .textAlignment(.center)
            
            // 其他组件如TextBoxDescription可按需调整布局
        }
    }
}

通过固定宽高，让所有TextField保持相同尺寸，避免参差不齐的问题。

3. 完整修改后的代码示例 #

Section("Time Selection"){
    HStack(alignment: .firstTextBaseline){
        Text("OFF")
            .foregroundStyle(.blue)
            .font(.footnote)
            .frame(width: 70, alignment: .leading)
        
        TimeInsertView(localTime: $localChockOFF, localTimeDate: $localChockOFFDate, utcTime: $utcChockOFF, utcTimeDate: $utcChockOFFDate, selectedDate: $flightDate, TextBoxDescription: "Chock OFF")
    }
    HStack(alignment: .firstTextBaseline){
        Text("Take OFF")
            .foregroundStyle(.blue)
            .font(.footnote)
            .frame(width: 70, alignment: .leading)
        
        TimeInsertView(localTime: $localChockIN, localTimeDate: $localChockINDate, utcTime: $utcChockIN, utcTimeDate: $utcChockINDate, selectedDate: $flightDate, TextBoxDescription: "Chock IN")
            .onChange(of: utcChockINDate) {
                totalBlock = dm.timeDifference(endDate: utcChockINDate, startDate: utcChockOFFDate)
            }
    }
    HStack(alignment: .firstTextBaseline){
        Text("Landing")
            .foregroundStyle(.blue)
            .font(.footnote)
            .frame(width: 70, alignment: .leading)
        
        TimeInsertView(localTime: $localTakeOFF, localTimeDate: $localTakeOFFDate, utcTime: $utcTakeOFF, utcTimeDate: $utcTakeOFFDate, selectedDate: $flightDate, TextBoxDescription: "Take Off")
    }
    HStack(alignment: .firstTextBaseline){
        Text("IN")
            .foregroundStyle(.blue)
            .font(.footnote)
            .frame(width: 70, alignment: .leading)
        
        TimeInsertView(localTime: $localLanding, localTimeDate: $localLandingDate, utcTime: $utcLanding, utcTimeDate: $utcLandingDate, selectedDate: $flightDate, TextBoxDescription: "Landing")
            .onChange(of: utcLandingDate) {
                totalFlightTime = dm.timeDifference(endDate: utcLandingDate, startDate: utcTakeOFFDate)
            }
    }
    
    HStack{
        Text("Block Hours")
        Spacer()
        Text(totalBlock)
    }
    HStack{
        Text("Flight Time")
        Spacer()
        Text(totalFlightTime)
    }
}

额外提示 #

• 固定宽度的数值可根据实际UI需求调整，确保左侧Text能完整显示最长的文本内容（如"Take OFF"）。
• 如果TimeInsertView内还有其他元素，可通过HStack的spacing参数统一间距，进一步优化布局一致性。

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