SwiftUI 表单图标
Posted
技术标签:
【中文标题】SwiftUI 表单图标【英文标题】：SwiftUI Form Icons 【发布时间】：2020-05-23 08:39:19 【问题描述】：对不起，如果这是一个非常愚蠢的问题并且可能是题外话，但我似乎无法在任何地方找到它。
我正在尝试为我的应用程序做一个简单的设置部分，并希望将图标添加到我的元素中，以便用户可以轻松了解每个设置的作用。为此，我使用了带有图像和标签 (Text) 的水平堆栈 (HStack)。
这以某种方式可以解决问题，但我想知道是否有更清洁的方法可以做到这一点。 我也想知道如何调整单元格之间的分隔符以停止在标签上，直到元素结束才继续。
由于我不太擅长解释，这里有两张图片：
这就是我得到的
我想要类似的东西
我的代码：
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")!))
))
【问题讨论】：
【参考方案1】：您可以从 tableview 中禁用分隔符并添加自己的分隔符。
类似这样的：
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()
【讨论】：
【参考方案2】：你的意思是这样吗？ （如果是，只需打开暗模式；））
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()
【讨论】：
以上是关于SwiftUI 表单图标的主要内容，如果未能解决你的问题，请参考以下文章
更改 TabView (SwiftUI) 中未选中图标的颜色