SwiftUI, Button, Link, NavigationLink, ToolbarItem

Button, 触发时执行操作的控件.

Button( action: {
        // did tap
      },
       label: { Text("Click Me") }
      )

如果你的 Button 的标签只是 Text 你可以用初始化 这个更简单的声明。

Button("Click Me") {
 // did tap
}
截屏2023-06-13 23.09.36.png

你可以用这个按钮变得有点漂亮

Button(action: {

      }, label: {
       Image(systemName: "clock")
       Text("Click Me")
       Text("Subtitle")
      })
      .foregroundColor(Color.white)
      .padding()
      .background(Color.blue)
      .cornerRadius(5)
截屏2023-06-13 23.13.11.png

Link, 创建一个链接样式的 按钮, 它将在关联的应用程序(如果可能),否则在用户的默认网络浏览器打开。

Link("View Our", destination: URL(string: "https://www.baidu.com")!)
截屏2023-06-13 23.23.14.png

NavigationLink, 按下时触发导航演示的按钮。 可替换 pushViewController

NavigationView
                                            {
 NavigationLink(destination:
 Text("Detail")
 .navigationBarTitle(Text("Detail"))
 ) {
 Text("Push")
 }.navigationBarTitle(Text("Master"))
}
截屏2023-06-13 23.25.48.png
截屏2023-06-13 23.25.41.png

在 List 中的 NavigationLink 来测试此功能。

NavigationView {
    List {
        NavigationLink(destination: Text("Detail")) {
            Text("Push")
        }.navigationBarTitle(Text("Master"))
    }
}
截屏2023-06-13 23.29.54.png

如果你的 NavigationLink 的标签只有 Text 你可以 使用这个更简单的声明进行初始化。 ???

NavigationLink("Detail", destination: Text("Detail").navigationBarTitle(Text("Detail")))

ToolbarItem, 表示可以放置在工具栏或导航栏中的项目的模型。 这代表了 UINavigationItem 中的大多数属性

添加titleView。

NavigationView {
    Text("SwiftUI").padding()
        .toolbar {
            ToolbarItem(placement: .principal) {
                VStack {
                    Text("Title")
                    Button("Clickable Subtitle") { print("principle") }
                }
            }
        }
}
截屏2023-06-14 21.49.32.png

添加 LeftBarButtonItem 或 LeftBarButtonItems

NavigationView {
    Text("SwiftUI").padding()
        .toolbar {
            ToolbarItem(placement: .navigationBarLeading) {
                Button {

                } label: {
                    Image(systemName: "square.and.pencil")
                }

            }
        }
}
截屏2023-06-14 21.54.11.png

添加 rightBarButtonItem 或 rightBarButtonItems。

NavigationView {
    Text("SwiftUI").padding()
        .toolbar {
            ToolbarItem(placement: .primaryAction) {
                Button {

                } label: {
                    Image(systemName: "square.and.pencil")
                }

            }
            ToolbarItem(placement: .navigationBarTrailing) {
                Button {

                } label: {
                    Image(systemName: "square.and.pencil")
                }

            }
        }
}
截屏2023-06-14 21.55.07.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容