我想為VStack設定固定寬度但它不起作用

我想為 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")
        }
    }
}

uj5u.com熱心網友回復：

首先 - 永遠不要將固定大小設定為.infinity. 您可以設定maxWidth/ maxHeight，但不能設定width/ height。

接下來，我會稍微改變一下它的結構。我將黃色視圖作為基礎 - 其余部分是疊加層。在疊加層中是GeometryReader，因此您可以知道黃色視圖的大小。這.frame(maxWidth: .infinity, maxHeight: .infinity)有助于GeometryReader適當地填充空間，使內容正確居中。

另一個變化是HStacknow 包含一個Spacer()- 只是一個視圖，我們還可以設定寬度，以將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。

標籤：

上一篇：如何洗掉始終位于最后的字串的一部分？

下一篇：為什么MacOS桌面版Flutter上的HTTP請求在Release上不起作用？