基于动态内容的SwiftUI列表行填充更改

我有一个

列表

，其中包含一些动态内容的

列表行

。我有一个带有按钮的“顶行”，可以展开并显示“底行”-类似这样：

        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)
            }
        }

VStack（对齐：。前导）{
HStack{
文本（“测试”）
.font（.headline）
.背景（颜色.绿色）
垫片（）
按钮（操作：{self.showBody.toggle（）}，
标签：{Image（系统名：“icloud.and.arrow.down”）}
}
.背景（颜色.黄色）
如果展示主体{
正文（“”）
.font（常量.font.NotesRow.preview）
.背景（颜色.蓝色）
}
}

这是它的样子。我将

.listRowInsets

设置为0，但请注意顶部和底部都有填充（即彩色线上方和下方的黑色线）

当我单击“展开”时，填充会发生变化，这会给人一种非常不和谐的体验：

是否有办法解决此问题，以便行扩展

更新

似乎如果我在行上设置

.padding（）

，就会得到正确的行为。如果我尝试将填充调整得更小，则会出现“缩小填充空间”的不良行为

下面是一个使用

.padding（）

的示例—请注意，行内容周围的灰色空格是相同的，并且完全占据了行（即，没有黑色）：

如果我将填充改为

.padding（5）

，您可以看到该行没有占据整行，并且该行中的黑色显示出来。扩展时，它会消耗掉黑色，使体验变得不受欢迎：

---

解决方案可能如下（填充等当然是可配置的，只是一个指示，表明内容可以在需要时完全填充行）

struct ListRow:视图{
@State private var showBody=false
var body：一些观点{
VStack（对齐：。前导）{
HStack{
文本（“测试”）
.font（.headline）
.背景（颜色.绿色）
垫片（）
按钮（操作：{self.showBody.toggle（）}，
标签：{Image（系统名：“icloud.and.arrow.down”）}
}
.背景（颜色.黄色）
如果展示主体{
正文（“”）
.font（.subheadline）
.背景（颜色.蓝色）
}
垫片（）
}
.listRowInsets（EdgeInsets（））
.listRowBackground（颜色.黄色）
}
}
结构ContentView:View{
var body：一些观点{
名单{
ForEach（0..<2）{in
ListRow（）
}
}
.environment（\.defaultMinListRowHeight，20）
}
}

解决方案可能如下（填充等当然是可配置的，只是一个指示，表明内容可以在需要时完全填充行）

struct ListRow:视图{
@State private var showBody=false
var body：一些观点{
VStack（对齐：。前导）{
HStack{
文本（“测试”）
.font（.headline）
.背景（颜色.绿色）
垫片（）
按钮（操作：{self.showBody.toggle（）}，
标签：{Image（系统名：“icloud.and.arrow.down”）}
}
.背景（颜色.黄色）
如果展示主体{
正文（“”）
.font（.subheadline）
.背景（颜色.蓝色）
}
垫片（）
}
.listRowInsets（EdgeInsets（））
.listRowBackground（颜色.黄色）
}
}
结构ContentView:View{
var body：一些观点{
名单{
ForEach（0..<2）{in
ListRow（）
}
}
.environment（\.defaultMinListRowHeight，20）
}
}

这不是我要问的。如果您查看第二个屏幕截图，该行已“丢失其填充”。这让体验不和谐，因为绿色标签“向上移动”以填充顶部填充物以腾出空间。我宁愿第一张图片上的灰色“展开底部”，而第二张图片上的黑色填充保持不变。IE-应该是“向下展开”，而不是“展开中心并移除填充物”。是的，就是这样-我必须将高度设置为一个较小的值，以便行占据所有填充物。谢谢这不是我要问的。如果您查看第二个屏幕截图，该行已“丢失其填充”。这让体验不和谐，因为绿色标签“向上移动”以填充顶部填充物以腾出空间。我宁愿第一张图片上的灰色“展开底部”，而第二张图片上的黑色填充保持不变。IE-应该是“向下展开”，而不是“展开中心并移除填充物”。是的，就是这样-我必须将高度设置为一个较小的值，以便行占据所有填充物。谢谢

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)
    }
}