swift 对齐表单中的TextField

yyhrrdl8 于 2023-06-28 发布在 Swift

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

你好，我创建了一个4行的表单，每行包含一个文本和2个文本字段，正如你可以从图片中看到的，它们没有垂直对齐，我找不到对齐所有文本字段的方法，并修复文本字段的大小，其中一些是长的，其中一些是短的。

Section("Time Selection"){
                    HStack{
                        Text("OFF")
                            .foregroundStyle(.blue)
                            .font(.footnote)
                            
                        TimeInsertView(localTime: $localChockOFF, localTimeDate: $localChockOFFDate, utcTime: $utcChockOFF, utcTimeDate: $utcChockOFFDate, selectedDate: $flightDate, TextBoxDescription: "Chock OFF")
                    }
                    HStack{
                        Text("Take OFF")
                            .foregroundStyle(.blue)
                            .font(.footnote)
                        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{
                        Text("Landing")
                            .foregroundStyle(.blue)
                            .font(.footnote)
                        
                        TimeInsertView(localTime: $localTakeOFF, localTimeDate: $localTakeOFFDate, utcTime: $utcTakeOFF, utcTimeDate: $utcTakeOFFDate, selectedDate: $flightDate, TextBoxDescription: "Take Off")
                    }
                    HStack{
                        Text("IN")
                            .foregroundStyle(.blue)
                            .font(.footnote)
                        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)
                    }
                    
                }

swift

来源：https://stackoverflow.com/questions/76563381/align-the-textfield-in-the-form

2条答案

按热度按时间

swvgeqrz1#

我会使用Grid。“网格”的工作就是对齐事物！
假设TimeInsertView是一个HStack，平均分配两个TextField…

Grid(alignment: .leading) {
    GridRow {
        Text("OFF")
            .foregroundStyle(.blue)
            .font(.footnote)
        TimeInsertView(...)
    }
    // add a Divider here if you like
    Divider()
    GridRow {
        Text("Take OFF")
            .foregroundStyle(.blue)
            .font(.footnote)
        TimeInsertView(...)
    }
    // and the rest of the grid rows...
}
HStack{
    Text("Block Hours")
    Spacer()
    Text(totalBlock)
}
// and the rest of the Section here...

这不依赖于最左边列的硬编码值。Grid在左列查找最宽的Text，并相应地调整右列的宽度。

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

xa9qqrwz2#

而不是试图改变输入你应该改变标签到一个给定的宽度和输入将自然填补其余的空间

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