SwiftUI:从滚动视图中的底部对齐构建视图 [英] SwiftUI: Build View from bottom alignment in scrollView
本文介绍了SwiftUI:从滚动视图中的底部对齐构建视图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
有没有办法在带有底部对齐的滚动视图内在 SwiftUI 中构建 UI 元素?
我的用例:我有一个屏幕，屏幕上有
- Spacer(分配下面的元素后还剩下什么)
- 徽标视图
- Spacer() - 30
- 一些文字 - 4/5 行
- Spacer() - 50(这将根据 GR 大小高度计算)
- 带有两个按钮的 HStack - 这应该固定在视图/ScrollView 的底部
<块引用>
我想知道如何将 HStack 视图固定到 ScrollView 底部
我已经复制了我的设置并在像这样的 Swift 游乐场中重现了我的问题
struct ContentView: 查看 {var主体:一些视图{GeometryReader { gr in滚动视图{虚拟堆栈{垫片()图像(系统名称:applelogo").resizable().frame(宽度:gr.size.width * 0.5，高度:gr.size.height * 0.3，对齐方式:.center)Spacer().padding(.bottom, gr.size.height * 0.01)文本(一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本").fontWeight(.regular).foregroundColor(.green).multilineTextAlignment(.center).padding(.top, gr.size.height * 0.05).padding(.horizontal, 40).layoutPriority(1)垫片().frame(minHeight: gr.size.height * 0.12)堆栈{按钮(动作:{}， 标签: {文本(按钮 1")}).foregroundColor(Color.white).padding(.vertical).frame(minWidth: 0, maxWidth: .infinity).background(Color.blue).cornerRadius(8)按钮(动作:{}， 标签: {文本(按钮 2")}).foregroundColor(Color.white).padding(.vertical).frame(minWidth: 0, maxWidth: .infinity).background(Color.blue).cornerRadius(8)}.padding(.horizontal, 20)}//.frame(maxWidth: .infinity, maxHeight: .infinity)}}}}我知道当在 SwiftUI 视图中引入 scrollView 时间隔长度更改为零，想知道实现此目的的最佳方法是什么
解决方案
struct SampleView: View {var主体:一些视图{GeometryReader { gr in虚拟堆栈{滚动视图{虚拟堆栈{//填充剩余的空间长方形().foregroundColor(.clear)图像(系统名称:applelogo").resizable().frame(宽度:gr.size.width * 0.5，高度:gr.size.height * 0.3，对齐方式:.center).padding(.bottom, gr.size.height * 0.06)文本(一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本").fontWeight(.regular).foregroundColor(.green).multilineTextAlignment(.center).padding(.horizontal, 40).layoutPriority(1)//填充 12%长方形().frame(高度:gr.size.height * 0.12).foregroundColor(.clear)堆栈{按钮(动作:{}， 标签: {文本(按钮 1")}).foregroundColor(Color.white).padding(.vertical).frame(minWidth: 0, maxWidth: .infinity).background(Color.blue).cornerRadius(8)按钮(动作:{}， 标签: {文本(按钮 2")}).foregroundColor(Color.white).padding(.vertical).frame(minWidth: 0, maxWidth: .infinity).background(Color.blue).cornerRadius(8)}.padding(.horizontal, 20).padding(.bottom, 20)}//使内容拉伸以填充整个滚动视图，但不会受到限制(如果需要，它可以增长).frame(minHeight: gr.size.height)}}}}}Is there a way to build UI elements in SwiftUI inside scroll view with bottom Alignment?
My use case: I have a screen where the screen has
- Spacer (What ever is left after allocating below elements)
- LogoView
- Spacer() - 30
- Some Text - 4/5 lines
- Spacer() - 50 (this will be calculated off of GR size Height)
- HStack with Two Button - This should be pinned to bottom of view / ScrollView
I would like to know how Can I pin the HStack view to ScrollView Bottom
I've replicated my setup and reproduced my problems in a Swift playground like so
struct ContentView: View {
var body: some View {
GeometryReader { gr in
ScrollView {
VStack {
Spacer()
Image(systemName: "applelogo")
.resizable()
.frame(width: gr.size.width * 0.5, height: gr.size.height * 0.3, alignment: .center)
Spacer().padding(.bottom, gr.size.height * 0.01)
Text("SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME")
.fontWeight(.regular)
.foregroundColor(.green)
.multilineTextAlignment(.center)
.padding(.top, gr.size.height * 0.05)
.padding(.horizontal, 40)
.layoutPriority(1)
Spacer()
.frame(minHeight: gr.size.height * 0.12)
HStack {
Button(action: {
}, label: {
Text("Button 1")
})
.foregroundColor(Color.white)
.padding(.vertical)
.frame(minWidth: 0, maxWidth: .infinity)
.background(Color.blue)
.cornerRadius(8)
Button(action: {
}, label: {
Text("Button 2")
})
.foregroundColor(Color.white)
.padding(.vertical)
.frame(minWidth: 0, maxWidth: .infinity)
.background(Color.blue)
.cornerRadius(8)
}
.padding(.horizontal, 20)
}
//.frame(maxWidth: .infinity, maxHeight: .infinity)
}
}
}
}
I understand that when scrollView is introduced in SwiftUI view Spacer length is changed to Zero, Would like to know what's the best way to achieve this
解决方案
struct SampleView: View {
var body: some View {
GeometryReader { gr in
VStack {
ScrollView {
VStack {
// Fills whatever space is left
Rectangle()
.foregroundColor(.clear)
Image(systemName: "applelogo")
.resizable()
.frame(width: gr.size.width * 0.5, height: gr.size.height * 0.3, alignment: .center)
.padding(.bottom, gr.size.height * 0.06)
Text("SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME")
.fontWeight(.regular)
.foregroundColor(.green)
.multilineTextAlignment(.center)
.padding(.horizontal, 40)
.layoutPriority(1)
// Fills 12 %
Rectangle()
.frame(height: gr.size.height * 0.12)
.foregroundColor(.clear)
HStack {
Button(action: {
}, label: {
Text("Button 1")
})
.foregroundColor(Color.white)
.padding(.vertical)
.frame(minWidth: 0, maxWidth: .infinity)
.background(Color.blue)
.cornerRadius(8)
Button(action: {
}, label: {
Text("Button 2")
})
.foregroundColor(Color.white)
.padding(.vertical)
.frame(minWidth: 0, maxWidth: .infinity)
.background(Color.blue)
.cornerRadius(8)
}
.padding(.horizontal, 20)
.padding(.bottom, 20)
}
// Makes the content stretch to fill the whole scroll view, but won't be limited (it can grow beyond if needed)
.frame(minHeight: gr.size.height)
}
}
}
}
}
这篇关于SwiftUI:从滚动视图中的底部对齐构建视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
