SwiftUI 表单图标

Question

抱歉，如果这是一个非常愚蠢的问题并且可能偏离主题，但我似乎无法在任何地方找到它。

我正在尝试为我的应用程序做一个简单的设置部分，并想向我的元素添加图标，以便用户可以轻松了解每个设置的作用。为此，我使用了水平堆叠 (HStack) 以及图像和标签 (Text)。

这在某种程度上起到了作用，但我想知道是否有更简洁的方法来做到这一点。我还想知道如何调整单元格之间的分隔符以停止在标签上，并且直到元素结束时才继续。

由于我不太擅长解释，这里有两张图片：

这就是我得到的

我想要类似的东西

我的代码:

SettingsView.swift

struct SettingsView: View {

    @State var age: Int = 0

    var body: some View {
        UITableView.appearance().separatorStyle = .singleLine

        UINavigationBar.appearance().shadowImage = UIImage()

        return NavigationView {

            Form {

                Section {
                    Picker(selection: .constant(1), label: HStack {

                        Image(systemName: "paintbrush")
                            .font(Font.system(size: 25, weight: .light))

                        Text("Editor Theme")
                    }) {
                        Text("Ayu Mirage").tag(1)
                        Text("Ayu Light").tag(2)
                    }
                    Stepper(value: self.$age,
                            in: 18...100,
                            label: {
                                HStack {

                                    Image(systemName: "rectangle.stack")
                                        .font(Font.system(size: 25, weight: .light))

                                    Text("Number of snippets: \(self.age)")
                                }
                    })

                    NavigationLink(destination: NotificationSettingsView()) {
                        HStack {
                            Image(systemName: "app.badge")
                                .font(Font.system(size: 25, weight: .light))

                            Text("Notifications")
                        }
                    }

                }

                Section {
                    VStack(alignment: .leading, spacing: 5) {
                        Text("Mercury v1.0")
                            .font(.headline)
                        Text("Designed with ❤️ by amodrono")
                            .font(.footnote)
                    }.padding(.vertical, 5)
                }

            }

            .navigationBarTitle("Hello")
            .environment(\.horizontalSizeClass, .regular)
            .navigationBarTitle(Text("Settings"), displayMode: .inline)
            .navigationBarItems(leading: (
                Button(action: {
                }) {
                    Image(systemName: "xmark")
                        .font(.headline)
                        .imageScale(.large)
                        .foregroundColor(Color(UIColor(named: "adaptiveColor")!))
                }
            ))

        }
    }
}

Answer 1

你是这个意思吗？（如果你，只需打开黑暗模式；））

import SwiftUI

@available(iOS 13.0, *)
public struct DarkView<Content> : View where Content : View {
    var darkContent: Content
    var on: Bool
    public init(_ on: Bool, @ViewBuilder content: () -> Content) {
        self.darkContent = content()
        self.on = on
    }

    public var body: some View {
        ZStack {
            if on {
                Spacer()
                    .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
                    .background(Color.black)
                    .edgesIgnoringSafeArea(.all)
                darkContent.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity).background(Color.black).colorScheme(.dark)
            } else {
                darkContent
            }
        }
    }
}

@available(iOS 13.0, *)
extension View {
    @available(iOS 13.0, *)
    public func darkModeFix(_ on: Bool = true) -> DarkView<Self> {
        DarkView(on) {
            self
        }
    }
}

struct ContentView: View {

    @State var age: Int = 0

    var body: some View {
        UITableView.appearance().separatorStyle = .singleLine

        UINavigationBar.appearance().shadowImage = UIImage()

        return NavigationView {

            Form {

                Section {
                    Picker(selection: .constant(1), label: HStack {

                        Image(systemName: "paintbrush")
                            .font(Font.system(size: 25, weight: .light))

                        Text("Editor Theme")
                    }) {
                        Text("Ayu Mirage").tag(1)
                        Text("Ayu Light").tag(2)
                    }
                    Stepper(value: self.$age,
                            in: 18...100,
                            label: {
                                HStack {

                                    Image(systemName: "rectangle.stack")
                                        .font(Font.system(size: 25, weight: .light))

                                    Text("Number of snippets: \(self.age)")
                                }
                    })

//                    NavigationLink(destination: NotificationSettingsView()) {
//                        HStack {
//                            Image(systemName: "app.badge")
//                                .font(Font.system(size: 25, weight: .light))
//
//                            Text("Notifications")
//                        }
//                    }

                }

                Section {
                    VStack(alignment: .leading, spacing: 5) {
                        Text("Mercury v1.0")
                            .font(.headline)
                        Text("Designed with ❤️ by amodrono")
                            .font(.footnote)
                    }.padding(.vertical, 5)
                }

            }

            .navigationBarTitle("Hello")
            .environment(\.horizontalSizeClass, .regular)
            .navigationBarTitle(Text("Settings"), displayMode: .inline)
            .navigationBarItems(leading: (
                Button(action: {
                }) {
                    Image(systemName: "xmark")
                        .font(.headline)
                        .imageScale(.large)
                    //    .foregroundColor(Color(UIColor(named: "adaptiveColor")!))
                }
            ))

        }
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
        .environment(\.colorScheme, .dark)
        .darkModeFix()
    }
}

Answer 2

您可以从表格视图中禁用分隔符并添加您自己的分隔符。

像这样：

struct ContentView: View {
    var body: some View {
        UITableView.appearance().separatorStyle = .none
        return NavigationView { 
            Form { 
                Section { 
                    RowView(iconName:"rectangle.stack", text:"Some text")
                    RowView(iconName:"paintbrush", text:"Some other text", showDivider: false)
                }
            }
        }
    }
}

struct RowView: View {
    var iconName: String
    var text: String
    var showDivider = true
    var body: some View {
        HStack(alignment: .firstTextBaseline) {
            Image(systemName: iconName)
            VStack(alignment: .leading) { 
            Text(text)
                if showDivider { 
                    Divider()
                } else {
                    Spacer()
                }
            }
        }
    }
}

SwiftUI 表单图标

SwiftUI Form Icons

ios

swift

swiftui

swiftui-form