在SwiftUI中，如何将文本视图 Package 在图像视图周围？

nqwrtyyt 于 11个月前发布在 Swift

关注(0)|答案(1)|浏览(110)

简单地说，我想实现这幅图中所示的目标。
有一个图像和一个文本并排放置。文本从与图像相同的高度开始，然后当它有足够的空间时，它从前缘继续。
外观描述：

的数据
我的代码不会在有足够空间的情况下 Package 文本。这是它显示的内容：
渲染视图：

的
我使用的是最新版本的SwiftUI。

VStack {
    HStack(alignment: .top) {
        AsyncImage(url: URL(string: "https://images.unsplash.com/photo-1619679505795-a4d0e6be5e02?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D")) { phase in
            if let image = phase.image {
                image
                    .resizable()
                    .scaledToFit()
            } else if phase.error != nil {
                Text("There was an error loading the image.")
            } else {
                ProgressView()
            }
        }
        .containerRelativeFrame(.horizontal, alignment: .leading) { size, axis in
            size * 0.25
        }
        Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas bibendum magna magna, eget dignissim leo lobortis eget.Maecenas bibendum magna magna, eget dignissim leo lobortis eget. Sed metus quam, condimentum in quam vel, rhoncus tempor purus. Proin tortor augue, commodo eu turpis in, rhoncus varius lorem. Morbi ut sapien eget diam viverra mattis quis et augue.")
            .padding(.leading)
    }
}
.padding(.horizontal, 12)
.padding(.vertical, 20)
.border(Color.black)

字符串

swift

来源：https://stackoverflow.com/questions/77693914/in-swiftui-how-can-i-wrap-a-text-view-around-an-image-view

1条答案

按热度按时间

jckbn6z71#

在代码中实现文本换行的一种方法是使用GeometryReader。此SwiftUI视图允许您为文本指定一个框架，然后将文本换行在该框架内。使用GeometryReader，您可以确保文本正确换行，而不管设备或屏幕大小如何。
这是你修改后的代码：

VStack {
    HStack(alignment: .top) {
        AsyncImage(url: URL(string: "https://images.unsplash.com/photo-1619679505795-a4d0e6be5e02?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D")) { phase in
            if let image = phase.image {
                image
                    .resizable()
                    .scaledToFit()
            } else if phase.error != nil {
                Text("There was an error loading the image.")
            } else {
                ProgressView()
            }
        }
        .frame(width: 100, height: 100) // Adjust as per your image size
        
        GeometryReader { geometry in
            Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas bibendum magna magna, eget dignissim leo lobortis eget.Maecenas bibendum magna magna, eget dignissim leo lobortis eget. Sed metus quam, condimentum in quam vel, rhoncus tempor purus. Proin tortor augue, commodo eu turpis in, rhoncus varius lorem. Morbi ut sapien eget diam viverra mattis quis et augue.")
                .padding(.leading)
                .frame(width: geometry.size.width, alignment: .leading)
        }
    }
}
.padding(12)
.border(Color.black)

字符串

的数据
希望能帮到您，如果有什么误会，请告诉我，我很乐意为您解决，并详细解释解决方案。

赞(0）回复(0）举报 11个月前

我来回答

在SwiftUI中，如何将文本视图 Package 在图像视图周围？

1条答案

相关问题

热门标签

最新问答