将元素放置在列表行的前导和尾随

Question

我想实现以下行为。我需要一个列表，但每一行都可以有一个前导元素和一个尾随元素。我尝试使用覆盖来做到这一点，但是列表行切断了覆盖。这是一个例子：

GeometryReader { geo in
    List {
        Text("Test 1")
        .overlay {
     Image(systemName: "info.circle")
      .offset(x: -50)
     }
    Text("Test 2")
    Text("Test 3")
  }
.padding(.horizontal, geo.size.width * 0.1)

在示例中，i 图标应位于第一行的左侧，但已隐藏。有什么方法可以使覆盖层可见或以其他方式实现我想要做的事情？

这是一张显示 Figma 模型的图像：

Figma 模型

我已经尝试在列表旁边放置一个列表，但显然行前和尾随的元素没有同步滚动。我还尝试使用 ClipShape 属性更改剪辑行为。但这只是剪切了整个列表，而不是每一行。然而，将其应用于单行也不起作用。

一个明显的解决方案是使用 ScrollView 构建我自己的列表。但是，我想将行分成几部分并使用 Apple 的列表样式，对于一个简单的列表而言，重建它的工作量太大了。

Answer 1

您可以使用

HStack

尝试这种方法来实现您的目标，

I need a list, but each row can have a leading and a trailing element

。

示例代码：

struct ContentView: View {
    var body: some View {
        List {
            HStack {
                Image(systemName: "info.circle")
                Spacer()
                Text("Test 1")
            }
            Text("Test 2")
            Text("Test 3")
        }
    }
}