ios 使用fixedSize()防止文本被截断时,SwiftUI ScrollView不会滚动

sgtfey8w  于 2023-02-01  发布在  iOS
关注(0)|答案(1)|浏览(161)

当试图创建一个包含文本的ScrollView时,我的文本被截断了,这样它就不会超出视图的高度。当我在Google上搜索这个问题时,我找到了包括. fixedSize(horizontal:假,垂直:true),这解决了截断问题。但现在我的ScrollView不会滚动,除非我在ScrollView中指定VStack的帧高(我不能这样做,因为我需要VStack的内容与ScrollView的底部对齐)。
下面是重现此问题的代码的简化版本:

import SwiftUI

struct TestView: View {
    var body: some View {
        GeometryReader { geo in
            ScrollView(.vertical, showsIndicators: false) {
                VStack(spacing: 24) {
                    Text("START")
                    
                    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit elit non magna bibendum, id mattis turpis tristique. Sed non rhoncus dui. Proin consequat scelerisque eros, in interdum velit pellentesque et. Proin at odio nec tellus feugiat suscipit ac nec tellus. Integer ac consectetur justo. Aenean in sagittis nisi. Duis et ultricies elit. Aliquam erat volutpat. Nam iaculis eget mi at fermentum. Proin ut sapien leo. Aliquam elementum vehicula arcu sit amet placerat. Quisque gravida felis ante, et rhoncus est congue viverra. Sed sagittis ornare mollis. Vivamus lorem libero, tincidunt vel feugiat nec, ultricies sed orci. Nulla facilisi. Etiam imperdiet condimentum eros, at sagittis quam euismod et. Maecenas cursus imperdiet mi, at ultrices nulla lacinia lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit elit non magna bibendum, id mattis turpis tristique. Sed non rhoncus dui. Proin consequat scelerisque eros, in interdum velit pellentesque et. Proin at odio nec tellus feugiat suscipit ac nec tellus. Integer ac consectetur justo. Aenean in sagittis nisi. Duis et ultricies elit. Aliquam erat volutpat. Nam iaculis eget mi at fermentum.")
                        .fixedSize(horizontal: false, vertical: true)
                    
                    Text("END")
                }
                .padding(.horizontal, 80)
                .padding(.top, 160)
                .frame(width: geo.size.width, height: geo.size.height, alignment: .bottom)
            }
        }
    }
}

有人知道我做错了什么吗?任何想法都将不胜感激!
我尝试过的事情:

  • 删除GeometryReader并手动设置VStack的高度和宽度
  • 删除VStack,只显示文本
  • 将fixedSize()放在整个VStack上,而不是文本元素上
  • 添加一个Spacer来强制VStack达到最大高度,而不是使用frame属性指定高度
agxfikkp

agxfikkp1#

找到了一个由@antoine-lamy提供的修复程序!虽然很陈旧,但是可以正常工作。Double Rotation Trick
下面是简化代码的工作版本:

struct TestView: View {
var body: some View {
    GeometryReader { geo in
        ScrollView(.vertical, showsIndicators: false) {
            VStack(spacing: 24) {
                Spacer()
                
                Text("START")
                
                Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit elit non magna bibendum, id mattis turpis tristique. Sed non rhoncus dui. Proin consequat scelerisque eros, in interdum velit pellentesque et. Proin at odio nec tellus feugiat suscipit ac nec tellus. Integer ac consectetur justo. Aenean in sagittis nisi. Duis et ultricies elit. Aliquam erat volutpat. Nam iaculis eget mi at fermentum. Proin ut sapien leo. Aliquam elementum vehicula arcu sit amet placerat. Quisque gravida felis ante, et rhoncus est congue viverra. Sed sagittis ornare mollis. Vivamus lorem libero, tincidunt vel feugiat nec, ultricies sed orci. Nulla facilisi. Etiam imperdiet condimentum eros, at sagittis quam euismod et. Maecenas cursus imperdiet mi, at ultrices nulla lacinia lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit elit non magna bibendum, id mattis turpis tristique. Sed non rhoncus dui. Proin consequat scelerisque eros, in interdum velit pellentesque et. Proin at odio nec tellus feugiat suscipit ac nec tellus. Integer ac consectetur justo. Aenean in sagittis nisi. Duis et ultricies elit. Aliquam erat volutpat. Nam iaculis eget mi at fermentum.")
                    .fixedSize(horizontal: false, vertical: true)
                
                Text("END")
            }
            .padding(.horizontal, 80)
            .padding(.top, 160)
            .rotationEffect(Angle(degrees: 180))
        }
        .rotationEffect(Angle(degrees: 180))
    }
}}

相关问题