Question

我有一个List和ListRows，其中有一些动态内容。我有一个“顶行”，其中有一个按钮可展开并显示“底行”-像这样：

        VStack(alignment: .leading) {
            HStack {
                Text("Test")
                    .font(.headline)
                    .background(Color.green)
                Spacer()
                Button(action: {self.showBody.toggle()},
                       label: {Image(systemName: "icloud.and.arrow.down")})
            }
                .background(Color.yellow)

            if showBody {
                Text("<insert body>")
                    .font(Constants.Fonts.NotesRow.preview)
                    .background(Color.blue)
            }
        }

这是它的样子。我将.listRowInsets设置为0，但请注意顶部和底部都有填充（即彩色线上方和下方的黑线）。

当我单击“扩展”时，填充会发生变化，并且会给人以震撼的体验：

有没有一种方法可以解决此问题，以使行扩展？

更新

看来，如果我在行上设置.padding()，则会得到正确的行为。如果我尝试将填充调整得较小，则会出现“缩小填充空间”的不良情况。

以下是它与.padding()一起正常工作的示例-请注意，行内容周围的灰色空间相同，并且已完全占据了行中（即，没有黑色）：

如果我将填充更改为.padding(5)，您会看到该行没有占据整行，并且出现了行中的黑色。扩展时，它会消耗黑色，从而使体验变得不期望：

Answer 1

解决方案可能如下（填充等当然是可配置的，只是指示内容可以根据需要完全填充行的方向）

struct ListRow: View {
    @State private var showBody = false

    var body: some View {
        VStack(alignment: .leading) {
            HStack {
                Text("Test")
                    .font(.headline)
                    .background(Color.green)
                Spacer()
                Button(action: {self.showBody.toggle()},
                       label: {Image(systemName: "icloud.and.arrow.down")})
            }
            .background(Color.yellow)

            if showBody {
                Text("<insert body>")
                    .font(.subheadline)
                    .background(Color.blue)
            }
            Spacer()
        }
        .listRowInsets(EdgeInsets())
        .listRowBackground(Color.yellow)
    }
}

struct ContentView: View {
    var body: some View {
        List {
            ForEach (0 ..< 2) { _ in
                ListRow()
            }
        }
        .environment(\.defaultMinListRowHeight, 20)
    }
}

SwiftUI列表行填充会根据动态内容进行更改

1 个答案: