SwiftUI -列表行分隔符插入,如iOS设置应用程序

q43xntqr  于 2023-05-02  发布在  iOS
关注(0)|答案(3)|浏览(123)

我正在尝试实现在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()
    }
}

任何想法如何才能实现这一点?

yk9xbfzb

yk9xbfzb1#

Xcode 14 / iOS 16

实际上需要的是.listStyle(.insetGrouped)

更多详情:here

zxlwwiss

zxlwwiss2#

iOS 16

在iOS 16中,这些行分隔符的行为已更改为您所需的方式。

因此,默认情况下,只要您使用默认的.insetGrouped列表样式,分隔符就会插入并与Text()对齐。
如果你想自定义它们,你可以使用listRowSeparatorLeadinglistRowSeparatorTrailing对齐指南(iOS 16新增)。有关更多信息,请查看this article

5uzkadbs

5uzkadbs3#

.listStyle(.sidebar)添加到列表

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")
            }
        }
        .listStyle(.sidebar)
    }
}

要使行看起来更好,应该使用Label,而不是ImageText

相关问题