我想实现下面的视觉呈现。一个表单,包括 iPhone 的“设置”应用程序等部分,但顶部有一个圆形视觉元素。我希望它们一起滚动并具有相同的背景颜色。
NavigationStack {
HStack {
Image("JoinUs") // Demo purpose
.resizable()
.frame(maxWidth: 360)
.aspectRatio(contentMode: .fit)
}
.background(.green)
.mask { RoundedRectangle(cornerRadius: 25) }
.padding()
Form {
Section {
Text("Voice")
Text("Speed")
Text("Pitch")
Text("Voice")
} header: {
Text("Sound")
}
Section {
Text("Text Size")
} header: {
Text("System")
}
Section {
Text("Voice")
Text("Speed")
Text("Pitch")
Text("Voice")
} header: {
Text("Sound")
}
Section {
Text("Voice")
Text("Speed")
Text("Pitch")
Text("Voice")
} header: {
Text("Sound")
}
}
.navigationTitle("Settings")
我观察到的两个问题:
添加此行:
.scrollContentBackground(.hidden)
您可以在每个
Section
: 上添加此行
.listRowSeparator(.hidden)
或创建您的
UnseparatedSection
以轻松重复使用:
struct UnseparatedSection<Content: View, Header: View>: View {
let content: Content
let header: Header
init(@ViewBuilder content: () -> Content,
@ViewBuilder header: () -> Header) {
self.content = content()
self.header = header()
}
var body: some View {
Section {
content
} header: {
header
}
.listRowSeparator(.hidden)
}
}
NavigationLink
:struct CustomNavigationLink<Destination: View, Label: View>: View {
let image: ImageResource
let destination: Destination
let label: Label
init(image: ImageResource,
@ViewBuilder destination: () -> Destination,
@ViewBuilder label: () -> Label) {
self.destination = destination()
self.label = label()
self.image = image
}
var body: some View {
NavigationLink {
destination
} label: {
HStack {
Image(image)
.padding(.trailing, 8)
label
}
}
.frame(maxWidth: .infinity,
maxHeight: .infinity,
alignment: .leading)
.padding(.vertical, 5)
.padding(.horizontal, 15)
.background{
RoundedRectangle(cornerRadius: 15)
.fill(.gray.opacity(0.2))
}
}
}
NavigationStack {
Form {
Image(.demo)
.resizable()
.aspectRatio(contentMode: .fit)
.frame(maxWidth: 360)
.mask { RoundedRectangle(cornerRadius: 25) }
UnseparatedSection {
CustomNavigationLink(image: .icon) {
/*TODO: Add Destination View*/
} label: {
Text("Voice")
}
CustomNavigationLink(image: .icon) {
/*TODO: Add Destination View*/
} label: {
Text("Speed")
}
CustomNavigationLink(image: .icon) {
/*TODO: Add Destination View*/
} label: {
Text("Pitch")
}
CustomNavigationLink(image: .icon) {
/*TODO: Add Destination View*/
} label: {
Text("Voice")
}
} header: {
Text("Sound")
}
//...
}
.navigationTitle("Settings")
.scrollContentBackground(.hidden)
}