[Series Lập Trình Qt] #2 Chương trình đầu tiên với giao diện đồ họa

Như thường lệ các bài Tutorials cơ bản chúng ta sẽ viết chương trình Hello World với giao diện đồ họa, ở đây mình sẽ giới thiệu một số thứ cơ bản về  các Label,button,…. cho các bạn

Các bạn có thể tìm kiếm tài liệu về Qt ở http://doc.qt.io ở đây có tất cả những tài liệu cho người mới bắt đầu hay kể cả chuyên gia.

Tạo dự án Qt mới

Chúng ta sẽ tạo 1 dự án mới qua thanh công cụ File > New File or Project. Chương trình đưa ra cho chúng ta khá nhiều lựa chọn về kiểu dự án mà chúng ta muốn thực hiện : ứng dụng giao diện đồ họa máy tính, ứng dụng di động, vv… Ở đây chúng ta sẽ chọn giao diện đồ họa QT Widgets Application Untitled

Quá trình tạo dự án sẽ được hướng dẫn bởi Qt Creator

hello.png

Ở đây tôi đặt tên dự án là HelloWorld bạn có thể đặt tên khác nếu muốn

Sau đó IDE sẽ hỏi bạn muốn dùng gói biên dịch nào của Qt. Trước mắt, chúng ta cứ sử dụng những lựa chọn mặc định mà IDE đề nghị.cuaso.png

Và đây là Project sau khi được tạo.

cuasomoio

Tôi sẽ giải thích sơ qua về các file này:

  • HelloWorld.pro : Project file.
  • main.cpp: file nguồn chính cho ứng dụng
  • mainwindow.cpp: file nguồn chính của lớp, mainwindow.ui
  • Mainwindow.h: file header của của lớp mainwindow
  • mainwindow.ui: giao diện đồ họa của ứng dụng

Tất cả các file đã được khởi tạo, bạn có thể ấn Windows+R để chạy chương trình nó sẽ hiện lên 1 cửa sổ và không có gì ở trong đó.

Chúng ta bắt đầu, bạn nhấn vào mainwindow.ui một cửa sổ design sẽ hiện raui

Phía bên trái là các Item, chúng ta có thể kéo thả chúng vào cửa sổ giao diện, tôi sẽ giải thích chúng dần qua các Tut hướng dẫn. Ở bài này chúng ta chỉ quan tâm đến Button và label.

  • Button (nút bấm): Khi ta ấn vào nó, 1 tín hiệu sẽ được truyền đi, chúng ta sẽ code 1 hành động khác được chạy khi nó bắt được tín hiệu phát ra từ button này như mở cửa sổ mới, chạy 1 hàm,hiển thị 1 dòng chữ…. Ở bài hướng dẫn này nó được dùng để gọi hành động hiển thị dòng chữ lên 1 Label.
  • Label: Hiển thị text cơ bản,ngoài ra ta có thể chèn ảnh,ảnh động…. vào đây, ở bài này tôi dùng nó để Hiển thị dòng thông báo “HelloWorld”.

Phía bên phải là thông số của các Item ta kéo vào Cửa sổ giao diện(tôi sẽ giải thích sau).

Chúng ta sẽ kéo 1 Label và 1 Push Button ở bên trái vào đây.

Bạn có thể nháy đúp vào chúng để thay đổi ký tự sẽ hiển thị. Điều chúng ta muốn ở đây là khi người dúng click vào button dòng chữ “Hello World” sẽ hiện ra ở Label.

uimoi

Bây giờ đến code, bạn nhấn chuột phải vào Push Button chọn Go to slot… chọn clicked()

Qt Creator đã tạo ra 1 hàm mới

on_pushButton_clicked()

code1.png

Ta code hàm  như sau(tôi sẽ giải thích bên dưới)

void MainWindow::on_pushButton_clicked()
{
    ui->label->setText("Hello World");
}

Khi người dùng ấn vào Button hàm

on_pushButton_clicked()

sẽ được gọi, trong hàm này câu lệnh

ui->label->setText("Hello World");

để hiển thị ra Label dòng chữ “Hello World”. Nếu bạn biết 1 chút về Tiếng anh thì ở đây câu lệnh khá rõ ràng ui trỏ đến Label và setText cho nó dòng chữ “Hello World”.

Chạy trương trình(Cửa sổ +R) và đây là kết quả khi ta click vào button :demo.png

Ở bài tiếp theo tôi sẽ hướng dẫn các bạn 1 số bài tập Toán rời rạc sau theo giao diện đồ họa :

  1. Thuật toán tìm kiếm tuyến tính.
  2. Thuật toán tìm kiếm nhị phân.
  3. Sắp xếp kiểu nổi bọt.
  4. Sắp xếp kiểu chèn.
  5. Sắp xếp kiểu chọn.
  6. Sắp xếp kiểu chèn nhị phân.
  7. Sinh xâu nhị phân lớn nhất liền sau.
  8. Tính div và mod.
  9. Nhân các số nguyên.

Một suy nghĩ 2 thoughts on “[Series Lập Trình Qt] #2 Chương trình đầu tiên với giao diện đồ họa

  1. Chào anh!
    Em thấy bài hướng dẫn sử dụng Qt của anh rất hay. Hiện nay em đang chuẩn bị làm niên luận với Qt. Anh có thể cung cấp thêm nhiều bài hướng dẫn về Qt để em có thể tham khảo và học hỏi thêm k ạ?
    Hy vọng sẽ sớm nhận được phản hồi từ anh.
    Thanks!

    Thích

Trả lời

Điền thông tin vào ô dưới đây hoặc nhấn vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Đăng xuất /  Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Đăng xuất /  Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Đăng xuất /  Thay đổi )

Connecting to %s