[SwiftUI] How to Use Various Buttons

• 1. Button
• 2. Link
• 3. NavigationLink
• 4. Memu
• 5. Toggle
• 6. EditButton
• 7. PasteButton
• 8. RenameButton
• 전체 테스트 소스

 

1. Button

Button(action:{
    // Do Somting
}){
    Text("Button")
}

화면에서 가장 일반적으로 쓰이는 버튼

클릭 시 어떠한 행동을 하게 하고 싶을 때 사용

Button 결과

 

2. Link

Link("Link", destination: URL(string:"https://royfactory.net")!)

외부 링크 사용 시

Link 결과

 

preview에서는 확인이 어렵고 테스트 장비를 통하여 build 하여 확인해 보면, Link 클릭 시 아래와 같이 인터넷 창이 새로 뜨면서 해당 링크로 이동됩니다.

Link를 통해 이동된 결과

 

3. NavigationLink

NavigationView {
    ...
    NavigationLink("NavigationLink", destination:NextView() )
    ...
}

내비게이션 링크의 경우 NavigationView 또는 NavigationStack에 씌워진 영역 내에서 View의 전환을 할 때 사용되는 버튼입니다.

 

NavigationLink 버튼

 

클릭 시 현재 NavigationView 영역이 destination인 NextView로 이동하게 됩니다.

NavigationLink 클릭으로 이동 된 Next View

 

4. Memu

Menu("Menu"){
    Button(action:{ }){ Text("Button #1") }
    Button(action:{ }){ Text("Button #2") }
    Button(action:{ }){ Text("Button #3") }
    Button(action:{ }){ Text("Button #4") }
}

메뉴는 버튼 클릭 시 레이어 팝업으로 2 뎁스 메뉴 목록이 필요한 경우 많이 사용됩니다.

메뉴 버튼

 

클릭 시 아래처럼 메뉴 목록이 뜨게 됩니다.

메뉴 클릭 시 나타난 메뉴 레이어 박스

 

5. Toggle

Toggle(isOn:.constant(true)){
    Text("Toggle")
}

Toggle은 Kotlin에서는 Switch, html에서는 checkbox처럼 활용되는 컴포넌트입니다.

 

6. EditButton

EditButton()

여기부터는 toolbar에서 사용되는 부분으로 우측 상단에 표시됩니다.

Edit Button

 

7. PasteButton

PasteButton(payloadType:String.self){strings in
    guard let text = strings.first else { return }
    pastedText = text
}

PasteButton

 

8. RenameButton

RenameButton()

RenameButton

 

전체 테스트 소스

import SwiftUI

// 테스트 페이지
struct TestView: View {
    @State private var pastedText:String = ""
    
    var body: some View {
        NavigationView {
            VStack {
                // Type #1. Basic Button
                Button(action:{
                    // Do Somting
                }){
                    Text("Button")
                }
                
                Divider()    // 글 간격용 (현재 글 의미 x)

                // Type #2. Link
                Link("Link", destination: URL(string:"https://royfactory.net")!)
                
                Divider()    // 글 간격용 (현재 글 의미 x)

                // Type #3. NavigationLink
                NavigationLink("NavigationLink", destination:NextView() )
                
                Divider()    // 글 간격용 (현재 글 의미 x)

                // Type #4. Menu
                Menu("Menu"){
                    Button(action:{ }){ Text("Button #1") }
                    Button(action:{ }){ Text("Button #2") }
                    Button(action:{ }){ Text("Button #3") }
                    Button(action:{ }){ Text("Button #4") }
                }
                
                Divider()    // 글 간격용 (현재 글 의미 x)
                
                // Type #5. Toggle
                Toggle(isOn:.constant(true)){
                    Text("Toggle")
                }
                .frame(width:110)
                
            }.toolbar{
                // Type #6. EditButton
                EditButton()
                
                // Type #7. PasteButton
                PasteButton(payloadType:String.self){strings in
                    guard let text = strings.first else { return }
                    pastedText = text
                }
                
                // Type #8. RenameButton
                RenameButton()
            }
        }
    }
}

// 다음 페이지
struct NextView: View {
    var body: some View {
        Text("Next View")
    }
}

// View 미리보기
struct TestView_Previews: PreviewProvider {
    static var previews: some View {
        TestView()
    }
}

다양한 버튼 적용 결과