SwiftUI 按钮的8种酷炫效果和3种高级用法(按钮使用大全)

你点击的是按钮,我提供的是服务

本文您将能学到

8种酷炫效果

  • 最简单的文本按钮
  • 自定义文本按钮
  • 颜色背景按钮
  • 边框按钮
  • 使用图标的按钮
  • 图片按钮
  • 带形状的图片按钮
  • 漂浮的按钮

3种高级用法

  • Button Style protocol的高级使用
  • Button styles and environment的高级使用
  • PrimitiveButtonStyle protocol的高级使用

最终效果

Button按钮大全

按钮是 程序与用户的纽带,程序通过用户点击不同的按钮来提供相应的服务。因此,按钮的使用是程序开发基础。本文将给通过介绍按钮使用的4种不同境界,来带领大家了解并掌握按钮的使用。


8种酷炫效果


Button 是一个pull-in视图,按钮既可以是简单文本、一张照片图像或者是更负责的视图组合。接下来让我们一起来看看格式各样的按钮吧!


1、最简单的文本按钮


image.png
  Button(action:{
                    print("最简单文本按钮")
                }){
                    Text("最简单文本按钮")
                }.padding()

2、自定义文本按钮


image.png
  Button(action:{
                    print("自定义文本按钮")
                }){
                    Text("自定义文本按钮")
                        .font(.largeTitle)
                        .foregroundColor(.orange)
                }.padding()

3、 颜色背景按钮


image.png
 Button(action:{
                    print("颜色背景的按钮")
                }){
                    Text("颜色背景的按钮")
                        .padding()
                        .foregroundColor(.white)
                        .background(Color.purple)
                        .cornerRadius(8)
                    
                }.padding()

4、 边框按钮


image.png
 Button(action:{
                    print("边框的按钮")
                }){
                    Text("边框的按钮")
                        .padding()
                        
                        .border(Color.orange)
                        .cornerRadius(10)
                    
                }.padding()
                
                Button(action:{
                    print("边框的按钮2")
                }){
                    Text("边框的按钮2")
                        .padding()
                        .background(RoundedRectangle(cornerRadius: 10)
                            .stroke(Color.green,lineWidth: 2)
                    )
                    
                }.padding()
                

5、使用图标的按钮

还有 67% 的精彩内容