我想为 VStack 设置固定宽度，但它不起作用

Question

我想为 VStack 设置固定宽度，但它不起作用，容器换行到文本，每个框对于列表都是独立的

这是容器：

var body: some View {
    HStack {
        GeometryReader { container in
            HStack {
                Image(systemName: category)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .foregroundColor(.ez)
                    .background(Color.red)
                    .frame(
                        width: (container.size.width * 0.2)
                    )

                VStack(alignment: .leading) {
                    Text(title)
                        .font(.subheadline)
                    Text(detail)
                        .font(.footnote)
                        .foregroundColor(.gray)
                        .padding(.vertical, 2)
                    Text("Actualizada el \(date)")
                        .font(.caption)
                        .foregroundColor(.blue)
                }
                .background(Color.red)
                .frame(
                    width: (container.size.width * 0.7),
                    height: .infinity
                )

            }
            .padding(.all, 15)
        }
    }
    .frame(width: .infinity, height: 120)
    .background(Color.yellow)
    .clipped()
    .padding(.horizontal, 15)
    .cornerRadius(4.0)
    .shadow(radius: 2.0)
}

这里会动态显示

不遵守固定尺寸

struct DashboardView: View {
var body: some View {
    NavigationView {
        ScrollView {
            FormView(category: "newspaper", title: "Inventario de material", detail: "Cartilla.", date: "01/07/2020")
            FormView(category: "newspaper", title: "Inventario de material", detail: "Cartilla de control de material y equipamiento para el trabajador.", date: "01/07/2020")
            FormView(category: "checkmark.shield.fill", title: "Programa de control", detail: "Cartilla de control de empleados en fábrica del mes de junio.", date: "01/07/2020")
            FormView(category: "bus.fill", title: "Urgente - Cartilla SBC", detail: "Encuesta para conocer la satisfacción de los clientes de EzForms en junio.", date: "01/07/2020")
        }
    }
}

Answer 1

首先 - 永远不要将固定大小设置为 .infinity。可以设置maxWidth/maxHeight，但不能设置width/height。

接下来，我会稍微改变一下它的结构。我会以黄色视图为基础 - 其余部分是叠加层。在叠加层中是GeometryReader，所以你可以知道黄色视图的大小。 .frame(maxWidth: .infinity, maxHeight: .infinity) 帮助 GeometryReader 适当地填充 space，使内容正确居中。

另一个变化是 HStack 现在包含一个 Spacer() - 只是一个我们也可以设置宽度的视图，space 出 Image 和VStack.

代码：

Color.yellow
    .frame(height: 120)
    .overlay(
        GeometryReader { geo in
            HStack(spacing: 0) {
                Image(systemName: category)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .foregroundColor(.green)
                    .background(Color.red)
                    .frame(width: geo.size.width * 0.2)

                Spacer(minLength: 0)
                    .frame(width: geo.size.width * 0.1)

                VStack(alignment: .leading) {
                    Text(title)
                        .font(.subheadline)
                    Text(detail)
                        .font(.footnote)
                        .foregroundColor(.gray)
                        .padding(.vertical, 2)
                    Text("Actualizada el")// \(date)")
                        .font(.caption)
                        .foregroundColor(.blue)
                }
                .background(Color.red)
                .frame(width: geo.size.width * 0.7, alignment: .leading)
            }
            .padding(15)
            .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
    )
    .cornerRadius(4.0)
    .shadow(radius: 2.0)
    .padding(.horizontal, 15)

结果：

您可以根据需要调整宽度，只要确保宽度之和等于 1。

我想为 VStack 设置固定宽度，但它不起作用

I want to set a fixed width to a VStack but it doesn't work

xcode

ios

swift

swiftui