MakeXYZ Fun

[Video Summary] Ch. 1.2. SwiftUI: Print, Buttons, Our First Var, and What the Heck is @State? (2025)

Admin -

Mô tả nhanh

Video này hướng dẫn cách tạo nút bấm (button) trong SwiftUI, sử dụng lệnh print để in dữ liệu, giới thiệu về biến (variable) và khái niệm @State để thay đổi giao diện người dùng.

Video

Click vào hình dưới để mở:

Mô tả chi tiết

Video này trình bày cách thêm nút bấm (button) vào ứng dụng SwiftUI, đồng thời giới thiệu các khái niệm cơ bản như lệnh print, biến (variable) và đặc biệt là @State để quản lý trạng thái của ứng dụng.

Các bước thực hiện:

  1. Thêm Button vào giao diện:
    • Sử dụng thư viện (library) để kéo thả button vào project.
    • Chỉnh sửa tiêu đề (title) của button.
    • Viết code trực tiếp để tạo button bằng câu lệnh Button(action: ).
    • Sử dụng "trailing closure" để viết action cho button.
  2. Sử dụng lệnh print:
    • Thêm lệnh print("you clicked me") vào action của button.
    • In kết quả ra cửa sổ console.
    • Sử dụng phím tắt command K để xóa console.
  3. Giới thiệu về biến (variable):
    • Khai báo biến message bằng từ khóa var message = "I am a programmer".
    • Sử dụng biến message thay thế cho chuỗi text trong Text().
    • Thay đổi nội dung biến message trong action của button -> gây ra lỗi.
  4. Giới thiệu về @State:
    • Thêm từ khóa @State phía trước khai báo biến để nó có thể thay đổi được.
    • Sử dụng @State private var message = "I am a programmer".
    • Khi button được bấm, message sẽ đổi thành "Awesome" và giao diện sẽ được cập nhật.
  5. Giải thích về cách SwiftUI hoạt động:
    • Khi một biến @State thay đổi, SwiftUI sẽ dựng lại toàn bộ giao diện.
    • Các biến @State được giữ lại và không bị hủy bỏ khi giao diện được làm mới.
    • SwiftUI là một framework declarative.
  6. Lời khuyên về lập trình:
    • Nên sử dụng private trước khai báo biến @State.

Chúc bạn có những trải nghiệm thú vị với SwiftUI!