swift - 如何使用放置在列表上方的 VStack 使整个视图可滚动
问题描述
目前我的视图只允许列表本身可以滚动。有谁知道如何通过放置在 VSTACK 下方的列表使整个视图可滚动?
var body: some View {
VStack {
ZStack{
Circle()
.stroke(Color.black, lineWidth: 5)
.frame(width: 150, height: 150)
Text("Score")
.font(.system(size: 20))
.bold()
}.padding(.bottom, 30)
Text("Friends")
.bold()
.font(.system(size: 24))
List{
ForEach(allFriends) { item in
HStack{
ZStack{
Circle()
.fill(LinearGradient(gradient: Gradient(colors: [Color("LightBlue"), Color("LightPink"), Color("LightYellow")]), startPoint: .bottom, endPoint: .top))
.frame(width: 60, height: 60)
Text(item.emoji)
.font(.system(size: 40))
}.padding(.trailing, 40)
Text(item.name)
.font(.system(size: 20))
.bold()
}
}
}
}
}
}
struct ProfilePage_Previews: PreviewProvider {
static var previews: some View {
ProfilePage()
}
}
解决方案
这里有 2 个可能的解决方案。(1) 将标题放在 List 中,或 (2) 使用 ScrollView 而不是 List。(您必须将 ForEach 循环更改回您的数据数组。)
struct ProfilePage: View {
var body: some View {
putHeaderWithinList
// OR
//useScrollViewInsteadOfList
}
var putHeaderWithinList: some View {
VStack {
List{
VStack {
ZStack{
Circle()
.stroke(Color.black, lineWidth: 5)
.frame(width: 150, height: 150)
Text("Score")
.font(.system(size: 20))
.bold()
}.padding(.bottom, 30)
Text("Friends")
.bold()
.font(.system(size: 24))
}
.frame(maxWidth: .infinity)
ForEach(0..<10) { index in
HStack{
ZStack{
Circle()
.fill(LinearGradient(gradient: Gradient(colors: [Color("LightBlue"), Color("LightPink"), Color("LightYellow")]), startPoint: .bottom, endPoint: .top))
.frame(width: 60, height: 60)
Text("\(index)")
.font(.system(size: 40))
}.padding(.trailing, 40)
Text("\(index)")
.font(.system(size: 20))
.bold()
}
}
}
}
}
var useScrollViewInsteadOfList: some View {
ScrollView {
VStack {
ZStack{
Circle()
.stroke(Color.black, lineWidth: 5)
.frame(width: 150, height: 150)
Text("Score")
.font(.system(size: 20))
.bold()
}.padding(.bottom, 30)
Text("Friends")
.bold()
.font(.system(size: 24))
ForEach(0..<10) { index in
VStack {
Divider()
HStack{
ZStack{
Circle()
.fill(LinearGradient(gradient: Gradient(colors: [Color("LightBlue"), Color("LightPink"), Color("LightYellow")]), startPoint: .bottom, endPoint: .top))
.frame(width: 60, height: 60)
Text("\(index)")
.font(.system(size: 40))
}.padding(.trailing, 40)
Text("\(index)")
.font(.system(size: 20))
.bold()
}
}
}
}
}
}
}
推荐阅读
- python - 从正态分布的 n 个值的样本中生成 N 个随机数据集?(Python)
- csv - 尝试在 QGIS 中绘制 CSV 文件的轮廓
- javascript - 找到多个元素时如何过滤getByLabelText查询?
- reactjs - React TypeScript 类型提示自动完成不适用于 Visual Studio Code 中的 React.forwardRef
- c - 如何在 C 中使用 readline() 获取历史记录?
- ios - SceneKit如何缩放相机以查看给定大小和距离的整个对象
- c# - C# Forms 事件,希望按钮单击产生两个按钮
- android - 从 AIDL 迁移到 Billing v4 我需要 InAppBillingService(com.android.vending.billing)
- python - Python ValueError: max() arg 是一个空序列
- webclient - vSphere Web 客户端错误 [400] 发送身份验证请求时出错