강의

멘토링

커뮤니티

Programming

/

Desktop Application

[Người mới bắt đầu] Lập trình QML Phần 2

QML để phát triển giao diện người dùng Qt, Chúng tôi sẽ cung cấp thông tin chi tiết từ giới thiệu đến thực hành.

(4.8) 6 đánh giá

39 học viên

  • qtdev
이론 실습 모두
iot
Qt
QML
C++

Đánh giá từ những học viên đầu tiên

Dịch cái này sang tiếng Việt

  • Phát triển giao diện người dùng hiện đại bằng QML

  • Phát triển giao diện người dùng bằng QML và C++

QML cho phát triển giao diện người dùng Qt,
Chúng tôi sẽ giải thích chi tiết từ phần giới thiệu đến phần thực hành.

Triển khai giao diện người dùng Qt Framework,
Mạnh mẽ hơn với QML!

Ngôn ngữ lập trình QML?

Giao diện người dùng hiện đại, tiên tiến trong khuôn khổ Qt
Đây là ngôn ngữ lập trình dễ phát triển.

QML (Ngôn ngữ Mô hình Qt) là ngôn ngữ lập trình được cung cấp bởi nền tảng Qt. QML là ngôn ngữ lập trình có thể được sử dụng để phát triển giao diện người dùng (UI) trong nền tảng Qt, giúp dễ dàng triển khai các giao diện người dùng hiện đại và tiên tiến.

Khi phát triển các chương trình GUI sử dụng nền tảng Qt, bạn có thể phân biệt giữa logic thiết kế của UI và logic chức năng của phần chức năng. Trong số đó, QML là ngôn ngữ được lựa chọn thay thế cho C++ khi phát triển các UI tương ứng với logic thiết kế . Cụ thể, việc phát triển UI với QML cho phép tách biệt hoàn toàn logic thiết kế và logic chức năng, do đó tăng khả năng tái sử dụng mã nguồn.

Việc phát triển logic thiết kế bằng QML cho phép bạn triển khai giao diện người dùng (UI) dễ dàng và nhanh chóng hơn nhiều so với việc phát triển bằng C++. Nó cũng cho phép bạn dễ dàng áp dụng các công nghệ GUI hiện đại, tiên tiến như Flickable, Gesture, Animation và 3D.

Ngữ pháp dễ hiểu, dễ đọc
Trải nghiệm những lợi ích của QML.

Hãy cùng xem ví dụ đầu ra "Hello World", một ví dụ phổ biến khi mới học ngôn ngữ lập trình. Thật dễ dàng để thấy QML ngắn gọn như thế nào.

nhập QtQuick Cửa sổ { chiều rộng : 300 chiều cao : 200 có thể nhìn thấy : đúng tiêu đề : qsTr ( "Mã nguồn ví dụ QML" ) Chữ { x : 80 y : 70 văn bản : "Xin chào thế giới" phông chữ. pixelSize : 25 } }

Màn hình thực thi mã nguồn ví dụ QML

QML rất đơn giản và dễ hiểu. Ngay cả những người không phải lập trình viên cũng có thể dễ dàng hiểu được. Do đó, các nhà thiết kế và lập trình viên có thể giao tiếp và chia sẻ ý tưởng bằng mã QML.

Do đó, QML cho phép các nhà thiết kế và nhà phát triển cộng tác bằng cách sử dụng cùng một công cụ phát triển, giúp giảm thời gian phát triển so với trước đây .

Giới thiệu về lập trình QML

Tôi giới thiệu điều này cho những người này 🙋‍♀

  • Bất kỳ ai (nhà phát triển, nhà thiết kế) muốn dễ dàng triển khai UI/UX hiện đại, tiên tiến bằng cách sử dụng QML trong Qt

  • Những người muốn tăng khả năng bảo trì và tái sử dụng mã nguồn bằng cách tách logic thiết kế và logic chức năng.

  • Các nhà thiết kế và nhà phát triển có thể giao tiếp và cộng tác hiệu quả thông qua các công cụ tương tự như QML.

Mục tiêu của khóa học 💡

  • Tìm hiểu cách phát triển UX/UI hiện đại, tiên tiến bằng QML.

  • Bạn sẽ học cách sử dụng QML để tách biệt hoàn toàn logic thiết kế khỏi logic chức năng.

  • Bạn có thể học các kỹ năng phát triển QML cần thiết trong lĩnh vực này một cách tự nhiên bằng cách nghiên cứu lý thuyết theo từng phần và tự viết mã dựa trên nhiều ví dụ thực tế khác nhau.

Các tính năng độc đáo của khóa học này
Hãy xem thử nhé
📖

Lý thuyết và thực hành cùng một lúc

Ngoài ngữ pháp QML, khóa học còn được thiết kế để nâng cao kỹ năng thực hành. Sau mỗi phần lý thuyết, bạn sẽ được học các ví dụ thực hành và tự mình áp dụng, từ đó nâng cao hơn nữa kỹ năng thực hành của mình.

Vượt ra ngoài những bức tường trực tuyến

Chúng tôi đã ghi lại hình ảnh người chia sẻ kiến thức trên màn hình. Học mọi lúc, mọi nơi, như thể bạn đang tham gia một lớp học ngoại tuyến, với mã hóa trực tiếp sống động.

Cấu trúc bài giảng 📖

Phần 1. Hoạt hình
Hoạt ảnh cung cấp một cách dễ dàng để áp dụng hoạt ảnh cho các thành phần GUI. Ví dụ: một nút có thể xuất hiện và biến mất. Hoạt ảnh có thể được sử dụng cho việc này. Ví dụ: một nút có thể biến mất trong một giây, hoặc có thể thiết lập một khoảng thời gian cụ thể để giá trị Độ mờ đục (Opacity) thay đổi từ 100% xuống 0%.

Sử dụng các hiệu ứng động này, bạn có thể tạo các hiệu ứng tương tự như hiệu ứng được sử dụng trên GUI. Bạn cũng có thể triển khai các hiệu ứng cho phép chuyển tiếp màn hình mượt mà. Do đó, trong phần này, bạn sẽ học cách sử dụng hiệu ứng động trên các thành phần GUI.

Phần 2. Triển khai ví dụ về giới hạn bóng bằng cách sử dụng hoạt ảnh và đường cong dễ dàng
Đường cong Easing cho phép bạn tạo các hiệu ứng phức tạp hơn bằng cách sử dụng các tùy chọn cụ thể trong hoạt ảnh. Ví dụ: bằng cách tăng tốc một khoảng thời gian cụ thể trong hoạt ảnh 10 giây, bạn có thể tạo ra nhiều hiệu ứng khác nhau.
Trong phần này, bạn sẽ học cách sử dụng đường cong easing trong hoạt hình thông qua các ví dụ thực tế.

Mục 3. Trạng thái và Chuyển đổi
Trạng thái biểu thị một điều kiện. Chuyển tiếp biểu thị một hành động. Ví dụ, trong công tắc bật/tắt, các điều kiện là "BẬT" và "TẮT", và hành động (chuyển tiếp) được định nghĩa là sự thay đổi từ "BẬT" sang "TẮT". Sử dụng trạng thái và chuyển tiếp, bạn có thể nhóm các hành vi phức tạp và để chúng thay đổi cùng nhau khi điều kiện thay đổi, giúp việc triển khai GUI phức tạp trở nên dễ dàng hơn.

Phần 4. Triển khai ví dụ về Trình xem hình ảnh bằng cách sử dụng Trạng thái và Chuyển tiếp
Trong phần này, chúng ta sẽ triển khai Trình xem hình ảnh bằng cách sử dụng Trạng thái và Chuyển tiếp đã học ở phần trước.

Mục 5. Mô hình và Chế độ xem
Mô hình và Chế độ xem được sử dụng để hiển thị lượng lớn dữ liệu trên GUI. Ví dụ: khi hiển thị 100 mục dữ liệu trong một bảng, dữ liệu được lưu trữ trong Mô hình, và Chế độ xem thể hiện cách dữ liệu được lưu trữ trong Mô hình được hiển thị trên GUI. Chế độ xem có thể là một bảng hoặc một cây. Trong phần này, bạn sẽ tìm hiểu cách sử dụng Mô hình và Chế độ xem.

Phần 6. Triển khai một ván cờ vua bằng cách sử dụng Mô hình và Chế độ xem
Tìm hiểu cách triển khai ví dụ về quân Mã cờ vua bằng Model và View.

Phần 7. Tích hợp giữa QML và C++
Tìm hiểu cách gọi các hàm cụ thể của lớp trong C++ từ QML, và cách gọi các hàm JavaScript cụ thể từ C++. Bạn cũng sẽ học cách gọi hàm và truyền dữ liệu giữa QML và C++ thông qua các ví dụ thực hành.

Phần 8. Triển khai các loại QML mới bằng C++
Bạn sẽ học cách triển khai các kiểu dữ liệu tùy chỉnh của riêng mình, chẳng hạn như các kiểu được cung cấp bởi QML. Trong một ví dụ thực hành, bạn sẽ học cách tự triển khai một kiểu Timer.

Phần 9. Triển khai các kiểu QML bằng cách sử dụng lớp QQuickPaintedItem
Cũng giống như cách chúng ta sử dụng QPainter để hiển thị các thành phần đồ họa 2D trên QWidget, chúng ta sẽ tìm hiểu cách sử dụng lớp QQuickPaintedItem được cung cấp trong C++ để hiển thị các thành phần đồ họa 2D trên QML Type bằng QPainter.

Phần 10. Triển khai các kiểu QML trong các cấu trúc lồng nhau
Khi chỉ triển khai một Kiểu, bạn có thể cần triển khai một cấu trúc phân cấp. Ví dụ: bạn có thể cần triển khai nhiều Kiểu trong một Kiểu. Trong phần này, chúng ta sẽ tìm hiểu cách triển khai Kiểu phân cấp thông qua chủ đề Biểu đồ.

Mục 11. Ánh xạ các đối tượng và biến QML từ C++
Trong phần này, bạn sẽ học cách trao đổi dữ liệu giữa C++ và QML và cách ánh xạ các kiểu biến giữa C++ và QML.

Phần 12. Triển khai ví dụ trò chuyện bằng C++ và QML
Phần này trình bày một ví dụ trò chuyện đơn giản, triển khai chức năng trò chuyện bằng C++ và màn hình bằng QML. Phần này hướng dẫn bạn cách xây dựng ứng dụng bằng C++ và QML.

Hỏi & Đáp 💬

👉 Xem bạn đã thay đổi như thế nào sau khi học.

  • Sau khi hoàn thành khóa học này, bạn sẽ có thể sử dụng QML một cách thành thạo. Bạn cũng sẽ hiểu được sự khác biệt, ưu và nhược điểm của việc sử dụng QML trong các dự án thực tế so với phương pháp C++/Qt truyền thống, QWidget.

  • Ngoài ra, khi triển khai một dự án bằng QML, bạn có thể tách biệt hoàn toàn logic thiết kế (phần QML) và logic chức năng (C++) của mã nguồn được triển khai, do đó tăng khả năng tái sử dụng của mã đã viết.

H. Ngoài lý thuyết và ngữ pháp, tôi có thể tiếp cận được nhiều ví dụ thực tế không?

Có chứ. Sau mỗi bài giảng lý thuyết, bạn sẽ có buổi thực hành lập trình với giảng viên, sử dụng các ví dụ minh họa. Điều này cho phép bạn học các kỹ năng lập trình thực tế bằng cách sử dụng QML tại nơi làm việc.

H. Có tài liệu tham khảo hoặc giáo trình nào cho các bài giảng tôi đang học không?

Hiện tại tôi là quản trị viên của Cộng đồng nhà phát triển Qt ( qt-dev.com ). Bạn có thể tìm thêm các tài nguyên liên quan đến Qt và QML trên trang web này.

H. Tôi cần biết điều gì trước khi tham dự buổi thuyết trình?

Khóa học này yêu cầu kiến thức cơ bản về C++ và Qt. Nếu bạn chưa có kinh nghiệm về Qt, chúng tôi khuyên bạn nên học khóa "Lập trình Qt" trước đó trước khi tham gia khóa học này.

H. Nội dung bài học được trình bày ở mức độ nào?

Bao gồm mọi thứ từ kiến thức cơ bản về QML đến các chủ đề nâng cao cho nhiều lĩnh vực ứng dụng khác nhau.

💾 Lưu ý

  • Để biết thêm thông tin, vui lòng xem bài học Phần 1 [Tài liệu tham khảo QML và Phiên bản Qt được đề xuất để học QML] được xem trước.

Gửi đến những người này
Tôi khuyên bạn nên dùng!

Đối tượng mục tiêu của khóa học là ai?

  • Những người muốn phát triển UI bằng QML

  • Bất kỳ ai muốn phát triển UI bằng QML trong khuôn khổ Qt

Người chơi có cần kiến thức không?

  • Cơ bản về C++

  • Kiến thức cơ bản về Qt

Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • Bất kỳ ai muốn phát triển giao diện người dùng bằng QML

  • Bất kỳ ai muốn phát triển giao diện người dùng bằng QML trong khung Qt

Cần biết trước khi bắt đầu?

  • C++ cơ bản

  • Qt

Xin chào
Đây là

1,040

Học viên

91

Đánh giá

103

Trả lời

4.7

Xếp hạng

9

Các khóa học

지식공유자 소개 ✒️


근무경력
: Embedded 분야 SW Team leader
LG전자, VS사업부 IVI선행플랫폼/모듈개발
SW마에스트로, SW 멘토

강의경력
삼성전자, Qt & QML 강의
LG전자, Qt & QML 분야 사내 강사
한컴아카데미 Qt 강의 출강
다수의 IT기업 Qt 강의 출강


저서
Qt 프로그래밍
Qt Quick 프로그래밍
Qt5 프로그래밍 가이드
MeeGo 프로그래밍 완벽 가이드
Qt 실전 프로그래밍

SW커뮤니티 운영
Qt 개발자 커뮤니티 운영자 ( www.qt-dev.com )

Chương trình giảng dạy

Tất cả

47 bài giảng ∙ (8giờ 56phút)

Tài liệu khóa học:

Tài liệu bài giảng
Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

6 đánh giá

4.8

6 đánh giá

  • siroimono님의 프로필 이미지
    siroimono

    Đánh giá 19

    Đánh giá trung bình 5.0

    5

    32% đã tham gia

    Hiện tại đây là khóa học Qt duy nhất hướng dẫn từ cơ bản đến nâng cao

    • qtdev
      Giảng viên

      Cảm ơn White rất nhiều vì đánh giá tốt. Những đánh giá tốt là động lực lớn để cung cấp nội dung chất lượng. Tôi sẽ cố gắng nhiều hơn nữa trong tương lai :)

  • yoonsojin006502님의 프로필 이미지
    yoonsojin006502

    Đánh giá 1

    Đánh giá trung bình 5.0

    5

    32% đã tham gia

    • qtdev
      Giảng viên

      Cảm ơn bạn đã đánh giá cao. Chúc bạn năm mới vui vẻ. ^^

  • fortex660224님의 프로필 이미지
    fortex660224

    Đánh giá 2

    Đánh giá trung bình 5.0

    5

    83% đã tham gia

    Tôi đang làm theo lộ trình và thích thú với các bài giảng. Đó là sự trợ giúp tuyệt vời cho sự hiểu biết tổng thể của tôi về Qt và QML. Ngoài ra, tôi rất vui vì bạn đã chia sẻ dữ liệu trên GitHub. Trong tương lai, sẽ thực sự tốt nếu có một dự án (một chương trình hoạt động trên nhiều màn hình) có thể được sử dụng toàn bộ thay vì chỉ thực hành một phần. Nếu bạn xem các bài giảng trên web, sẽ có một quá trình tạo một dự án sử dụng những gì bạn đã học, chẳng hạn như các lớp ngữ pháp hoặc mạng lúc đầu, sau đó tạo bảng thông báo CRUD làm dự án thực hành và các khái niệm còn lại trong đầu bạn sẽ được kết nối và hoàn thành một phần. Chúng tôi cũng đang chờ đợi các bài giảng nhúng sẽ được phát hành trong tương lai. Cảm ơn

    • qtdev
      Giảng viên

      Xin chào. Con trai thân mến, Cảm ơn bạn đã xem xét khóa học chi tiết này. Cảm ơn bạn rất nhiều vì đã cho chúng tôi biết những gì cần cải thiện. Cảm ơn bạn rất nhiều vì phản hồi có giá trị của bạn. Nếu có cơ hội một ngày nào đó tôi sẽ mua cho bạn một tách cà phê. ^^; Chúng tôi cũng đang chuẩn bị một bài giảng theo kiểu dự án có tựa đề “Tiêu đề dự kiến: Dự án triển khai trạm phát sóng cá nhân theo thời gian thực”. Sau đó, "Lập trình Linux nhúng bằng Qt" Bài giảng và "Qt cho MCU" Tôi có kế hoạch giảng bài. Cuối cùng xin cảm ơn bạn rất nhiều vì những phản hồi tốt.

  • psjhsi122824님의 프로필 이미지
    psjhsi122824

    Đánh giá 3

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    Đó là một bài giảng tốt. Tôi hy vọng bạn sẽ làm một khóa học chuyên sâu vào lần tới. Vui lòng sử dụng Python-QML.

    • qtdev
      Giảng viên

      Xin chào. Bài hát của JunHwan Cảm ơn bạn rất nhiều vì đánh giá tốt. Chúng tôi cũng đang chuẩn bị một video liên quan đến Qt Python. :)

  • nonenonenone님의 프로필 이미지
    nonenonenone

    Đánh giá 8

    Đánh giá trung bình 4.9

    4

    100% đã tham gia

    Sự tương tác giữa C++ và QML vẫn còn khó khăn nên tôi sẽ phải xem lại vài lần, nhưng nhìn chung, cảm ơn bạn đã cho tôi biết về các tính năng chính của QML. Tôi nghĩ tôi sẽ phải thành thạo nó thông qua việc học hỏi nhiều lần.

    • qtdev
      Giảng viên

      Xin chào. GUI đa ngôn ngữ, cảm ơn bạn đã bình luận.

805.461 ₫

Khóa học khác của qtdev

Hãy khám phá các khóa học khác của giảng viên!

Khóa học tương tự

Khám phá các khóa học khác trong cùng lĩnh vực!