微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

滚动视图中的SwiftUI HStack无法正确显示图像

如何解决滚动视图中的SwiftUI HStack无法正确显示图像

我有以下内容

如果有1张图像,或者如果有多个图像,则仅显示1张图像,它将创建一个HStack,应为scrollable才能显示所有图像:

 ScrollView {
        vstack (alignment: .leading) {
            if userData.profileURL1 != nil {
                ScrollView(.horizontal,showsIndicators: false) {
                    HStack {
                        URLImage(URL(string: userData.profileURL)!,placeholder: Image(systemName: "circle"),content:  {
                            $0.image
                                .resizable()
                                .aspectRatio(contentMode: .fill)
                                .frame(width: (UIScreen.main.bounds.width - 33),height: 500)
                            }
                        )
                        .cornerRadius(12)
                        .padding([.leading,.trailing])
                        URLImage(URL(string: userData.profileURL1!)!,.trailing])
                        if userData.profileURL2 != nil {
                            URLImage(URL(string: userData.profileURL2!)!,content:  {
                                $0.image
                                    .resizable()
                                    .aspectRatio(contentMode: .fill)
                                    .frame(width: (UIScreen.main.bounds.width - 33),height: 500)
                                }
                            )
                            .cornerRadius(12)
                            .padding([.leading,.trailing])
                        }
                    }
                }
            } else {
                URLImage(URL(string: userData.profileURL)!,content:  {
                    $0.image
                        .resizable()
                        .aspectRatio(contentMode: .fill)
                        .frame(width: (UIScreen.main.bounds.width - 33),height: 500)
                    }
                )
                .cornerRadius(12)
                .padding([.leading,.trailing])
            }
       }
}

该逻辑有效,并且如果存在多个图像,则显示多张图像,但显示不正确,根据我的判断,图像的高度没有得到应用:

enter image description here

enter image description here

图像正在滚动以显示其他图像,但高度都混乱了。但是,如果仅显示1张图像(否则),则该图像将显示出良好的图像,完整的高度以及所有内容

解决方法

ScrollView不知道内容的高度,您必须明确指定它。根据您的代码,看起来应该是

ScrollView(.horizontal,showsIndicators: false) {
    HStack {
        URLImage(URL(string: userData.profileURL)!,placeholder: Image(systemName: "circle"),content:  {
            $0.image
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(width: (UIScreen.main.bounds.width - 33),height: 500)
            }
        )

      // .. other content here

    }
    .frame(height: 500)     // << here !!

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。