Question

我正在尝试构建类似于以下内容的屏幕。

但是此屏幕上有些错误的地方：

图像及其下方的文本宽度并不完全相同。图像稍宽。
图像及其关联的文本与上方的文本重叠。
图片下方的文本被截断。

我已经连续两天没有运气了！有人可以提供有关如何实现此目标的反馈吗？以下是我在代码方面的知识。

struct ImageTitleTileView: View {
    var body: some View {
         GeometryReader { geometry in
            VStack(spacing: 0) {
                Image("image")
                    .resizable()
                    .frame(width: geometry.size.width)
                    .aspectRatio(1, contentMode: .fill)

                Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.")
                    .padding()
                    .background(Color.white)
            }
            .edgesIgnoringSafeArea(.all)
        }.aspectRatio(contentMode: .fit)
    }
}

struct MainItemView: View {
    var body: some View {
        ZStack {
            Color(.whiteSmoke)
            VStack(spacing: 10) {
                Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.")

                ImageTitleTileView()
            }.padding(16)
        }
    }
}

Answer 1

只需更改一些参数即可。您可以完成这项工作。一个是图像比率从1.0到0.9；另一种是将frame从图像移动到堆栈；最后是从“文本”中删除填充

struct ImageTitleTileView: View {
var body: some View {
     GeometryReader { geometry in
        VStack(spacing: 0) {
            Image("image")
                .resizable()
                .aspectRatio(0.90, contentMode: .fill)
            Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.")
                .background(Color.white)
        }.frame(width: geometry.size.width / 1.5)
        .edgesIgnoringSafeArea(.all)
    }.aspectRatio(contentMode: .fit)
}
}

Answer 2

发生的事情是您的图像在框架外显示图像部分。

您需要为图像设置clipped（）属性，以将图像部分隐藏在框架之外。

Image("image")
      .resizable() // allow image to be resizable
      .scaledToFill() // scale your image as you need it to fill or to fit
      .frame(height: 200, alignment: .center) // set image frame size
      .aspectRatio(contentMode: .fill) // image aspect ratio
      .clipped() // hide image outside the frame parts (CSS: overflow: hidden)

修复SwiftUI中的重叠视图

2 个答案: