英文:
Extra size geometryReader
问题
我试图创建这个布局:
我希望我的矩形的高度与右侧的灰色文本完全相同。我使用了如下的 GeometryReader:
var body: some View {
HStack(alignment: .top, spacing:0){
Text("14:00")
.modifier(DateSurveyListModifier(fontSize: 14, isSelected: occurrence.isCompleted))
.foregroundColor(occurrence.isCompleted ? .HomeMainGrey : .HomeSecondGrey )
.padding(.top,10)
.padding(.trailing,12)
VStack(spacing:0){
if occurrence.isCompleted
{
pinSurveyHighlighted().frame(width:25,height:25)
}
else
{
pinSurveyHighlighted()
}
// 这是我尝试创建矩形的地方
GeometryReader{ geo in
Rectangle().foregroundColor(.HomeMainBlue).frame(width:3,height: geo.size.height)
}.aspectRatio(contentMode: .fit)
}
.padding(.top,5)
VStack(alignment: .leading ,spacing:0){
Text("Lorem ipsum dolor sit dolor dolor dolor dolor dolor dolor dolor dolor dolor dolor")
.multilineTextAlignment(.leading)
.modifier(TitleSurveyListModifier(fontSize : 15 ,isSelected: occurrence.isCompleted))
.foregroundColor(occurrence.isCompleted ? .HomeGreySurveyList : .HomeSecondGrey )
.frame(alignment: .leading)
Text("lit. Aliquam quis consectetu consectet consectetu consectetu consectetu consectetuconsectetu consectetu consectetu consectetu consectetu consectetu consectetu consectetu v consectetuuconsectetu ")
.modifier(DateSurveyListModifier(fontSize : 14 , isSelected: occurrence.isCompleted))
.foregroundColor(occurrence.isCompleted ? .HomeMainGrey : .HomeSecondGrey )
.multilineTextAlignment(.leading)
.frame(alignment: .leading)
.padding(.top,5)
}
.padding(.leading,15)
Spacer()
}
.padding(.top,15)
.padding(.horizontal,37)
}
我可能错过了一些关于 GeometryReader 的规则,但在我的情况下,它占用了太多的空间,现在我的布局看起来像这样:
我正在寻找一些帮助,以了解 GeometryReader 究竟是如何工作的,以便实现我的视图。
英文:
I'm trying to make this layout:
I want that my rectangle have exactly the same height as my grey text at the right. I used Geometry reader like that:
var body: some View {
HStack(alignment: .top, spacing:0){
Text("14:00")
.modifier(DateSurveyListModifier(fontSize: 14, isSelected: occurrence.isCompleted))
.foregroundColor(occurrence.isCompleted ? .HomeMainGrey : .HomeSecondGrey )
.padding(.top,10)
.padding(.trailing,12)
VStack(spacing:0){
if occurrence.isCompleted
{
pinSurveyHighlighted().frame(width:25,height:25)
}
else
{
pinSurveyHighlighted()
}
// Where I'm trying to make the rectangle
GeometryReader{ geo in
Rectangle().foregroundColor(.HomeMainBlue).frame(width:3,height: geo.size.height)
}.aspectRatio(contentMode: .fit)
}
.padding(.top,5)
VStack(alignment: .leading ,spacing:0){
Text("Lorem ipsum dolor sit dolor dolor dolor dolor dolor dolor dolor dolor dolor dolor")
.multilineTextAlignment(.leading)
.modifier(TitleSurveyListModifier(fontSize : 15 ,isSelected: occurrence.isCompleted))
.foregroundColor(occurrence.isCompleted ? .HomeGreySurveyList : .HomeSecondGrey )
.frame(alignment: .leading)
Text("lit. Aliquam quis consectetu consectet consectetu consectetu consectetu consectetuconsectetu consectetu consectetu consectetu consectetu consectetu consectetu consectetu v consectetuuconsectetu ")
.modifier(DateSurveyListModifier(fontSize : 14 , isSelected: occurrence.isCompleted))
.foregroundColor(occurrence.isCompleted ? .HomeMainGrey : .HomeSecondGrey )
.multilineTextAlignment(.leading)
.frame(alignment: .leading)
.padding(.top,5)
}
.padding(.leading,15)
Spacer()
}
.padding(.top,15)
.padding(.horizontal,37)
}
I've probably missed some rules about Geometry reader but in my case it's taking so much space, I my layout look like this now:
I'm looking for some help to understand how geometryReader really works, in order to achieve my view.
答案1
得分: 3
在这里不需要使用geometryReader。
VStack {
// ...
Spacer().layoutPriority(1)
}
// 这将把HStack中的所有视图推到屏幕的上半部分,并为HStack节省一些空间,同时防止出现长的垂直矩形。
.fixedSize(horizontal: false, vertical: true)
// 这将确保灰色文本部分具有正确的高度。
var body: some View {
VStack {
HStack(alignment: .top, spacing: 0) {
Text("14:00")
.padding(.top, 10)
.padding(.trailing, 12)
VStack(spacing: 0) {
if false {
Text("hext").frame(width: 25, height: 25)
} else {
Text("hext")
}
// 在这里我试图创建矩形
Rectangle().foregroundColor(.red).frame(width: 3)
}.padding(.top, 5)
VStack(alignment: .leading, spacing: 0) {
Text("Lorem ipsum dolor sit dolor dolor dolor dolor dolor dolor dolor dolor dolor dolor")
.multilineTextAlignment(.leading)
.font(Font.system(size: 15))
.frame(alignment: .leading)
Text("lit. Aliquam quis consectetu consectet consectetu consectetu consectetu consectetuconsectetu consectetu consectetu consectetu consectetu consectetu consectetu consectetu v consectetuuconsectetu")
.font(Font.system(size: 14))
.multilineTextAlignment(.leading)
.frame(alignment: .leading)
.padding(.top, 5)
}.padding(.leading, 15).fixedSize(horizontal: false, vertical: true)
Spacer()
}
Spacer().layoutPriority(1)
}
.padding(.top, 15)
.padding(.horizontal, 37)
}
英文:
You don't need to use geometryReader here.
VStack{ ...
Spacer().layoutPriority(1) }
//This will push all views in the `HStack` to the top half of the screen and saving some place for `HStack` while preventing the long vertical rectangle from appearing.
and
.fixedSize(horizontal: false, vertical: true)
//This will guarantee the gray text part will have the correct height.
can achieve what you want.
var body: some View {
VStack{
HStack(alignment: .top, spacing:0){
Text("14:00")
//.modifier(DateSurveyListModifier(fontSize: 14, isSelected: occurrence.isCompleted))
// .foregroundColor(occurrence.isCompleted ? .HomeMainGrey : .HomeSecondGrey )
.padding(.top,10)
.padding(.trailing,12)
VStack(spacing:0){
if false
{
Text("hext").frame(width:25,height:25)
}
else
{
Text("hext")
}
// Where I'm trying to make the rectangle
Rectangle() .foregroundColor(.red).frame(width: 3)
}.padding(.top,5 )
VStack(alignment: .leading ,spacing:0){
Text("Lorem ipsum dolor sit dolor dolor dolor dolor dolor dolor dolor dolor dolor dolor")
.multilineTextAlignment(.leading)
.font(Font.system(size: 15))
// .modifier(TitleSurveyListModifier(fontSize : 15 ,isSelected: occurrence.isCompleted))
// .foregroundColor(occurrence.isCompleted ? .HomeGreySurveyList : .HomeSecondGrey )
.frame(alignment: .leading)
Text("lit. Aliquam quis consectetu consectet consectetu consectetu consectetu consectetuconsectetu consectetu consectetu consectetu consectetu consectetu consectetu consectetu v consectetuuconsectetu ")
.font(Font.system(size: 14))
// .modifier(DateSurveyListModifier(fontSize : 14 , isSelected: occurrence.isCompleted))
// .foregroundColor(occurrence.isCompleted ? .HomeMainGrey : .HomeSecondGrey )
.multilineTextAlignment(.leading)
.frame(alignment: .leading)
.padding(.top,5)
}.padding(.leading,15).fixedSize(horizontal: false, vertical: true)
Spacer()
}
Spacer().layoutPriority(1)
}
.padding(.top,15)
.padding(.horizontal,37)
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论