英文:
Align the TextField in the form
问题
你好，我创建了一个包含4行的表单，每行都包含一个文本和两个文本字段，正如您从图片中所看到的，它们没有垂直对齐，我找不到将它们对齐并固定文本字段大小的方法，有些太长，有些太短。
Section("时间选择"){
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)
}
}
英文:
Hello I created a form with 4 rows, each row contains a Text and 2 Textfields, as you can see from the picture they are not aligned vertically I can't find the way to align all of them and fix the size of the textfield, some of them are to long some of them to short.
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)
}
}
答案1
得分: 1
我会使用 Grid。"grid" 的主要作用就是对齐元素！
假设 TimeInsertView 是一个 HStack，其中包含两个等宽的 TextField...
Grid(alignment: .leading) {
GridRow {
Text("OFF")
.foregroundStyle(.blue)
.font(.footnote)
TimeInsertView(...)
}
// 如果需要，可以在这里添加分隔线
Divider()
GridRow {
Text("Take OFF")
.foregroundStyle(.blue)
.font(.footnote)
TimeInsertView(...)
}
// 其他的 grid 行...
}
HStack{
Text("Block Hours")
Spacer()
Text(totalBlock)
}
// 还有这个部分的其余内容...
这不依赖于左侧列的硬编码值。Grid 会找到左列中最宽的 Text，然后相应地调整右列的宽度。
英文:
I would use a Grid. The very job of a "grid" is to align things!
Assuming TimeInsertView is a HStack that distributes two TextFields equally...
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...
This does not rely on a hardcoded value for the leftmost column. Grid finds the widest Text on the left column, and adjusts the right column's width accordingly.
答案2
得分: -1
改变输入不如将标签更改为给定的宽度，然后输入将自然填充剩余的空间。
英文:
Instead of trying to change the inputs you should change the labels to a given width and the inputs will naturally fill the rest of the space
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论