Skip to content
  • Home
  • Code
  • iOS & Swift
  • Combine
  • RxSwift
  • SwiftUI
  • Flutter & Dart
  • Tutorials
  • Art
  • Blog
Fx Studio
  • Home
  • Code
  • iOS & Swift
  • Combine
  • RxSwift
  • SwiftUI
  • Flutter & Dart
  • Tutorials
  • Art
  • Blog
Written by chuotfx on August 26, 2019

SwiftUI – Button Action

SwiftUI

Chào các bạn đã quay lại với bài tutorial này của mình. Hôm nay, chúng ta sẽ tiếp tục với thao tác nhỏ là lấy sự kiện của người dùng. Đây chính là IBAction của UIKit.

Bắt đầu

​ Chúng ta hãy tạo 1 Button đơn giản nhất cả thể với cú pháp mới của SwiftUI

Button(action: {
    // your action here
}) {
    Text("This is button")
}

Giải thích chút trong đoạn code trên nha:

  • Tạp 1 button thì chúng ta có 2 phần, 1 cho phần cho xử lý thao tác của người dùng và 1 phần cho định nghĩa button
  • Ta có thể thay Text bằng nhiều loại Text, Image … hoặc view nào đó

Ví dụ:

Button(action: {
    // your action here
}) {
    Image("example-image")
}

Rất đơn giản đúng không nào, tiếp tục vào phần sau:

Xử lý

Ta xem 1 đoạn code sau:

struct ContentView : View {
    
    @State var count: Int = 0
    
    var body: some View {
        VStack {
            Text("Count: \(self.count)")
                .font(.title)
            Button(action: {
                //did tap
                self.count = self.count + 1
            }) {
                Text("Tap me")
            }
            .padding(.all)
            .background(Color.green)
        }
    }
}

Biến @State sẽ giải thích ở 1 phần khác, còn hiển nôm na ở đây thì nó sẽ theo dõi trạng thái và tự động cập nhật cho Text

Theo tư tưởng của `SwiftUI` thì:

  • Bạn chỉ cần khai báo 1 lần và nó sẽ chạy mãi mãi.
  • Khi người dùng nhấn vào button thì sẽ bắt sự kiện người dùng là tăng biến count lên 1 đơn vị.
  • Phần hiển thị Text sẽ auto cập nhật giá trị của biến count mà mình không cần quan tâm tới việc update dữ liệu mới lên Text như UIKit và cách lập trình trước đây.

​ Vô cùng đơn giản phải không, chúc bạn thành công với Button và Action.

Tham khảo các cách sử dụng khác của Button

  • Cách kute dễ thương :
Button(
    action: {
        // did tap
    },
    label: { Text("Click Me") }
)
  • Cách siêu cấp kute dễ thương :
Button("Click Me") {
    // did tap
}
  • Cách đẹp trai, thanh lịch, vô địch khắp vũ trụ này :
Button(action: {
                
}, label: {
    Image(systemName: "clock")
    Text("Click Me")
    Text("Subtitle")
})
.foregroundColor(Color.white)
.padding()
.background(Color.blue)
.cornerRadius(5)

Cảm ơn bạn đã đọc và theo dõi bài viết này. Ngoài ra, bạn muốn xem trực quan sinh động hơn thì có thể xem ở link video sau.

 

FacebookTweetPinYummlyLinkedInPrintEmailShares0

Related Posts:

  • Updating UI - SwiftUI Notes #3
    Updating UI - SwiftUI Notes #3
  • SwiftUI - Phần 2 : Cơ bản về ứng dụng SwiftUI App
    SwiftUI - Phần 2 : Cơ bản về ứng dụng SwiftUI App
  • Presenting an Alert - SwiftUI Notes #4
    Presenting an Alert - SwiftUI Notes #4
  • Sử dụng Custom UIView vào SwiftUI Project - SwiftUI Notes #16
    Sử dụng Custom UIView vào SwiftUI Project - SwiftUI Notes…
Tags: button, SwiftUI
Written by chuotfx

Hãy ngồi xuống, uống miếng bánh và ăn miếng trà. Chúng ta cùng nhau đàm đạo về đời, về code nhóe!

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Donate – Buy me a coffee!

Fan page

Fx Studio

Tags

Actor Advanced Swift api AppDistribution Asynchronous autolayout basic ios tutorial blog callback ci/cd closure collectionview combine concurrency CoreData Core Location crashlytics darkmode dart dart basic dart tour Declarative decoding delegate deploy fabric fastlane firebase flavor flutter GCD iOS mapview MVVM optional protocol rxswift Swift Swift 5.5 SwiftUI SwiftUI Notes tableview testing TravisCI unittest

Recent Posts

  • Raw String trong 10 phút
  • Dispatch Semaphore trong 10 phút
  • Tổng kết năm 2022
  • KeyPath trong 10 phút – Swift
  • Make color App Flutter
  • Ứng dụng Flutter đầu tiên
  • Cài đặt Flutter SDK & Hello world
  • Coding Conventions – người hùng hay kẻ tội đồ?
  • Giới thiệu về Flutter
  • Tìm hiểu về ngôn ngữ lập trình Dart

You may also like:

  • Updating UI - SwiftUI Notes #3
    Updating UI - SwiftUI Notes #3
  • Tích hợp UIViewController (UIKit) vào SwiftUI Project -…
    Tích hợp UIViewController (UIKit) vào SwiftUI Project - SwiftUI Notes #14
  • Creating your UI - SwiftUI Notes #2
    Creating your UI - SwiftUI Notes #2
  • Extracting subview - SwiftUI Notes #5
    Extracting subview - SwiftUI Notes #5
  • Presenting an Alert - SwiftUI Notes #4
    Presenting an Alert - SwiftUI Notes #4

Archives

  • February 2023 (1)
  • January 2023 (2)
  • November 2022 (2)
  • October 2022 (1)
  • September 2022 (5)
  • August 2022 (6)
  • July 2022 (7)
  • June 2022 (8)
  • May 2022 (5)
  • April 2022 (1)
  • March 2022 (3)
  • February 2022 (5)
  • January 2022 (4)
  • December 2021 (6)
  • November 2021 (8)
  • October 2021 (8)
  • September 2021 (8)
  • August 2021 (8)
  • July 2021 (9)
  • June 2021 (8)
  • May 2021 (7)
  • April 2021 (11)
  • March 2021 (12)
  • February 2021 (3)
  • January 2021 (3)
  • December 2020 (3)
  • November 2020 (9)
  • October 2020 (7)
  • September 2020 (17)
  • August 2020 (1)
  • July 2020 (3)
  • June 2020 (1)
  • May 2020 (2)
  • April 2020 (3)
  • March 2020 (20)
  • February 2020 (5)
  • January 2020 (2)
  • December 2019 (12)
  • November 2019 (12)
  • October 2019 (19)
  • September 2019 (17)
  • August 2019 (10)

About me

Education, Mini Game, Digital Art & Life of coders
Contacts:
contacts@fxstudio.dev

Fx Studio

  • Home
  • About me
  • Contact us
  • Mail
  • Privacy Policy
  • Donate
  • Sitemap

Categories

  • Art (1)
  • Blog (22)
  • Code (4)
  • Combine (22)
  • Flutter & Dart (24)
  • iOS & Swift (86)
  • RxSwift (37)
  • SwiftUI (76)
  • Tutorials (70)

Newsletter

Stay up to date with our latest news and posts.
Loading

    Copyright © 2023 Fx Studio - All rights reserved.

    Share this ArticleLike this article? Email it to a friend!

    Email sent!