SwiftUI - 按钮

SwiftUI 中的按钮视图是最强大且最常用的 UI 控件。当用户点击或单击按钮控件时，按钮控件会执行指定的操作。或者我们可以说，当用户通过单击按钮与其交互时，按钮会触发操作。

它可用于执行各种操作，例如提交表单、启动导航、启用/禁用或任何用户定义的操作。我们还可以在任何容器(例如列表、菜单等)内使用按钮。因此，在本章中，我们将讨论如何创建和设置按钮的样式。

在 SwiftUI 中创建按钮

按钮用于在我们单击时执行操作。它是 SwiftUI 中最通用的 UI 控件，因为我们可以对其进行各种样式设置，以便它可以轻松适应 UI 设计。按钮可以是带有标签的文本、图像或形状。

因此，为了创建按钮，SwiftUI 提供了一个预定义的方法或修饰符名称 Button()。它创建一个带有操作的按钮。因此，每当我们点击它时，它就会触发该操作。

语法

以下是按钮的基本语法 −

Button(
   _ title key: LocalizedStringKey,
   action: @escaping @MainActor () -> Void
)

参数

此视图使用以下参数 −

• titleKey:表示按钮的标题。

• action:表示用户点击按钮时按钮将执行的操作。

Button() 重载方法

以下是 Button − 的一些重载方法

示例 1

下面的 SwiftUI 程序创建一个简单的按钮。

import SwiftUI
struct ContentView: View {
   var body: some View {
      VStack{
         Button("Submit", action: submit).font(.largeTitle)
      }
   }
   func submit(){
      print("Form is submitted")
   }
}
#Preview {
   ContentView()
}

输出

示例 2

以下 SwiftUI 程序用于创建不同类型的按钮。

import SwiftUI

struct ContentView: View {
   var body: some View {
      VStack{
         
         // 带有操作的简单按钮
         Button("Submit", action: submit)
            .font(.largeTitle)
         // 具有内联操作和标签的 Nutton
         Button(action: {print("Submitted")}, label: {
            Text("Button").font(.largeTitle)
         })
         
         // Button with role
         Button("Cancel", role: .cancel, action: {print("Deleted")}).font(.largeTitle)
      }
   }
   func submit(){
      print("Form is submitted")
   }
}
#Preview {
   ContentView()
}

输出

在 SwiftUI 中设置按钮样式

SwiftUI 提供了一个名为 buttonStyle() 的预定义修饰符来设置按钮样式。此修饰符允许用户应用自定义样式和标准样式来增强指定按钮的外观。我们还可以创建自定义样式来设置按钮样式;这些自定义样式应符合 ButtonStyle 协议。

语法

以下是语法 −

func buttonStyle(Style)

示例

以下 SwiftUI 程序用于创建具有自定义样式的按钮。

import SwiftUI

// 按钮的自定义样式
struct customStyle: ButtonStyle{
   func makeBody(configuration: Configuration) -> some View {
      configuration.label
         .background(configuration.isPressed ? .yellow : .red)
         .foregroundStyle(.white)
         .clipShape(Capsule())
         .padding()
         .shadow(radius: 14)
         .scaleEffect(configuration.isPressed ? 0.99 : 1.0)
   }
}
struct ContentView: View {
   var body: some View {
      VStack{
         
         // 带有操作的简单按钮
         Button("Submit", action: submit)
            .font(.largeTitle)
         
         // 按钮风格
         Button("Submit", action: submit)
            .font(.largeTitle)
            .buttonStyle(customStyle())
      }
   }
   func submit(){
      print("Form is submitted")
   }
}
#Preview {
   ContentView()
}

输出

SwiftUI 中的带图像的按钮

在 SwiftUI 中，我们可以将图像用作按钮。我们可以使用任何类型的图像作为按钮，例如 jpeg、png 等，我们还可以创建图标作为按钮，或者可以使用 SF 符号图标作为按钮。

示例 1

以下 SwiftUI 程序用于创建带图像的按钮。

import SwiftUI

struct ContentView: View {
   var body: some View {
      VStack{
         
         // 图像作为按钮
         Button(action: {print("Display")}){
            Image("Image").frame(width: 150).clipShape(Circle())
         }
      }
   }

#Preview {
   ContentView()
}

输出

示例 2

以下 SwiftUI 程序将图标创建为按钮。

import SwiftUI
struct ContentView: View {
   var body: some View {
      VStack{
         
         // SF 符号图标作为按钮
         Button(action: {print("Display")}){
            Image(systemName: "doc.fill").font(.largeTitle)
         }
         
         // SF 符号图标作为带有文本的按钮
         Button(action: {print("Display")}){
            HStack{
               Image(systemName: "doc.fill").font(.largeTitle)
               Text("Open")
               
            }
         }
      }
   }
}
#Preview {
   ContentView()
}

输出

SwiftUI 中的动画按钮

在 SwiftUI 中，我们还可以为按钮添加动画。要创建动画按钮，我们必须使用 .animation() 修饰符应用动画。此 animation() 修饰符在给定按钮上应用不同类型的动画，例如 easeIn、easeOut 等。

示例

以下 SwiftUI 程序用于创建动画按钮。

import SwiftUI
struct ContentView: View {
   @State private var isPressed = false
   var body: some View {
      VStack{
         Button("Submit", action: submit)
            .font(.largeTitle)
            .scaleEffect(isPressed ? 0.8 : 1.2)
            .animation(.easeIn, value: isPressed)
      }
   }
   func submit(){
      print("Form is submitted")
   }
}

#Preview {
   ContentView()
}

输出