我正在尝试实现在iOS设置应用程序或例如Roborock应用程序中也可以看到的行为(参见下面的屏幕截图)。我想去一个图标,然后给予一个插入线分隔符。
我已经试过了:
UITableView.appearance().separatorInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 80)
但这在SwiftUI 3中不起作用。0 / iOS 15.1
下面是完整的代码:
import SwiftUI
struct ListTest: View {
var body: some View {
List {
Button(action: {
print("Test")
}) {
SettingsCell2(title: "Test", iconName: "bell.badge.fill")
}
Button(action: {
print("Test")
}) {
SettingsCell2(title: "Test", iconName: "bell.badge.fill")
}
}
}
}
struct SettingsCell2: View {
var title : String
var iconName : String
var body: some View {
HStack {
ZStack {
RoundedRectangle(cornerRadius: 8, style: .continuous)
.fill(Color.red)
Image(systemName: iconName)
.foregroundColor(.white)
}
.frame(width: 30, height: 30, alignment: .center)
Text(title)
.foregroundColor(.primary)
Spacer()
Image(systemName: "chevron.right")
.font(.headline)
.foregroundColor(.gray)
}
}
}
struct ListTest_Previews: PreviewProvider {
static var previews: some View {
ListTest()
}
}
任何想法如何才能实现这一点?
3条答案
按热度按时间yk9xbfzb1#
Xcode 14 / iOS 16
实际上需要的是
.listStyle(.insetGrouped)
更多详情:here
zxlwwiss2#
iOS 16
在iOS 16中,这些行分隔符的行为已更改为您所需的方式。
因此,默认情况下,只要您使用默认的
.insetGrouped
列表样式,分隔符就会插入并与Text()
对齐。如果你想自定义它们,你可以使用
listRowSeparatorLeading
和listRowSeparatorTrailing
对齐指南(iOS 16新增)。有关更多信息,请查看this article。5uzkadbs3#
将
.listStyle(.sidebar)
添加到列表要使行看起来更好,应该使用
Label
,而不是Image
和Text