ios SwiftUI -列表分隔符:在行的开头使用非文本组件时,开头出现不需要的插图

eblbsuwk  于 2023-01-10  发布在  iOS
关注(0)|答案(3)|浏览(133)
    • 说明**

HStack的列表行组件以非Text开始并且后跟Text组件时,然后,行Divider从行中出现的第一个Text开始。我期望的是Divider延伸到整个行。我已经在List上尝试了listSyle()的所有组合,但都没有解决问题。如图所示,分频器忽略Text之前的任何东西。

    • 问题**

有没有办法强制Divider拉伸通过行?

    • 重现步骤**
struct ContentView: View {
    var body: some View {
        List {
            HStack{
                Image(systemName: "star")
                    .frame(width: 50, height: 50)
                Text("Chocolate")
            }
            HStack{
                Image(systemName: "star")
                    .frame(width: 50, height: 50)
                Text("Waffles")
            }
        }
    }
}
    • 环境**
  • Xcode版本信息:Xcode 14.0.1
  • 部署目标:x1米11米1x
bq3bfh9z

bq3bfh9z1#

这是可能的。listRowSeparator有参数edges。如果你用.all调用它,分隔符会延伸到整个行。然后,有三个选择hiddenautomaticvisiblevisible效果强制一个边缘选项。

struct ContentView: View {
    var body: some View {
        List {
            HStack{
                Image(systemName: "star")
                    .frame(width: 50, height: 50)
                Text("Chocolate")
            }.listRowSeparator(.visible, edges: .all)
            
            HStack{
                Image(systemName: "star")
                    .frame(width: 50, height: 50)
                Text("Waffles")
            }.listRowSeparator(.visible, edges: .all)
        }
    }
}
kiz8lqtg

kiz8lqtg2#

您可以将系统图像转换为文本,然后该行将从此处开始:

struct ContentView: View {
    var body: some View {
        List {
            HStack{
                Text(Image(systemName: "star")) // here
                Text("Chocolate")
            }
            HStack{
                Text(Image(systemName: "star")) // here
                Text("Waffles")
            }
        }
    }
}
2g32fytz

2g32fytz3#

另一种方法是隐藏分隔符,并在行与行之间手动添加一个Divider(),分隔符将显示在列表的中心。

var body: some View {
    List {
        HStack{
            Image(systemName: "star")
                .frame(width: 50, height: 50)
            Text("Chocolate")
        }
        .listRowSeparator(.hidden)      // Hide the separator

        // Add a manual divider
        Divider()
        
        HStack{
            Image(systemName: "star")
                .frame(width: 50, height: 50)
            Text("Waffles")
        }
        .listRowSeparator(.hidden)      // Hide the separator
    }
}

相关问题