//
// SearchableDemo.swift
// SwiftUIDemo
//
// Created by shiyanjun on 2023/2/17.
//
import SwiftUI
struct NavigtionViewDemo: View {
var body: some View {
NavigationStack {
List {
NavigationLink("我的组件") {
MyCompView()
}
NavigationLink("我的API") {
MyApiView()
}
}
.navigationTitle("配置中心")
.navigationBarTitleDisplayMode(.inline)
.listStyle(PlainListStyle())
}
}
}
struct MyCompView: View {
var body: some View {
NavigationStack {
List {
NavigationLink(destination: ArticleCompView()) {
Text("文章组件")
}
NavigationLink(destination: PhotoCompView()) {
Text("图片组件")
}
NavigationLink(destination: ChartCompView()) {
Text("报表组件")
}
}
.listStyle(PlainListStyle())
.navigationBarTitle("我的组件", displayMode: .inline)
.navigationBarItems(trailing: AddCompButtonView())
}
}
}
struct MyApiView: View {
var body: some View {
NavigationStack {
List {
NavigationLink(destination: ArticleApiView()) {
Text("文章API")
}
NavigationLink(destination: PhotoApiView()) {
Text("图片API")
}
NavigationLink(destination: ChartApiView()) {
Text("报表API")
}
}
.listStyle(PlainListStyle())
.navigationBarTitle("我的API", displayMode: .inline)
.navigationBarItems(trailing: AddApiButtonView())
}
}
}
struct ArticleCompView: View {
var body: some View {
NavigationStack {
Text("文章组件信息")
.navigationTitle("文章组件信息")
}
}
}
struct PhotoCompView: View {
var body: some View {
NavigationStack {
Text("照片组件信息")
.navigationTitle("照片组件信息")
}
}
}
struct ChartCompView: View {
var body: some View {
NavigationStack {
Text("报表组件信息")
.navigationTitle("报表组件信息")
}
}
}
struct ArticleApiView: View {
var body: some View {
NavigationStack {
Text("文章API")
.navigationTitle("文章API")
}
}
}
struct PhotoApiView: View {
var body: some View {
NavigationStack {
Text("照片API")
.navigationTitle("照片API")
}
}
}
struct ChartApiView: View {
var body: some View {
NavigationStack {
Text("报表API")
.navigationTitle("报表API")
}
}
}
struct AddCompButtonView: View {
var body: some View {
NavigationStack {
NavigationLink(destination: AddCompView()) {
Image(systemName: "plus")
}
}
}
}
struct AddApiButtonView: View {
var body: some View {
NavigationStack {
NavigationLink(destination: AddApiView()) {
Image(systemName: "plus")
}
}
}
}
struct AddCompView: View {
var body: some View {
NavigationStack {
ZStack {
Color.orange
Text("创建组件页面")
}
.navigationTitle("创建组件页面")
}
}
}
struct AddApiView: View {
var body: some View {
ZStack {
Color.purple
Text("创建API页面")
}
}
}
struct SearchableDemo_Previews: PreviewProvider {
static var previews: some View {
NavigtionViewDemo()
}
}
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter