Cách sử dụng Tkinter Designer

July 7, 2023 · View on GitHub

Các bản dịch

Mục lục

  1. Bắt đầu

    1. Cài đặt Python
    2. Cài đặt Tkinter Designer
    3. Tạo tài khoản Figma

  2. Cách định dạng thiết kế ở Figma

    1. Tài liệu tham khảo
    2. Hướng dẫn về các phần tử

  3. Sử dụng Tkinter Designer

    1. Mã truy cập cá nhân
    2. Lấy địa chỉ của file
    3. Sử dụng CLI (Command Line Interface)
    4. Sử dụng GUI (Giao diện người dùng đồ họa)

  4. Khắc phục sự cố



Bắt đầu [Top]

1. Install Python

Trước khi sử dụng Tkinter Designer, bạn sẽ cần cài đặt Python.

*Trong hướng dẫn này, bạn sẽ sử dụng Trình cài đặt Gói cho Python (pip), điều này có thể đòi hỏi bạn phải thêm Python vào PATH của hệ thống.


2. Cài đặt Tkinter Designer

3 Phương Pháp:

  1. Sử dụng câu lệnh pip install tkdesigner

  2. Cài đặt poetry và sử dụng các câu lệnh:

    • poetry new <gui_project_name> && cd <gui_project_name>
    • poetry add tkdesigner
    • poetry install

  3. Chạy Tkinter Designer từ mã nguồn mở:

    1. Tải xuống các tệp nguồn cho Tkinter Designer bằng cách tải xuống thủ công hoặc sử dụng GIT.

      git clone https://github.com/ParthJadhav/Tkinter-Designer.git

    2. Thay đổi thư mục làm việc của bạn thành Tkinter Designer.

      cd Tkinter-Designer

    3. Cài đặt các gói cần thiết.

      • pip install -r requirements.txt
        • Nếu pip không hoạt động, hãy thử các câu lệnh sau:
        • pip3 install -r requirements.txt
        • python -m pip install -r requirements.txt
        • python3 -m pip install -r requirements.txt
        • Nếu vẫn không hoạt động, hãy đảm bảo Python đã được thêm vào PATH.

    Điều này sẽ cài đặt tất cả các yêu cầu và Tkinter Designer. Trước khi sử dụng Tkinter Designer, bạn cần tạo một tệp Figma với các hướng dẫn dưới đây.

    Nếu bạn đã tạo một file, hãy đi tới phần Sử dụng Tkinter Designer.


3. Tạo tài khoản Figma

  1. Truy cập figma.com và đăng kí
  2. Nhập thông tin của bạn, sau đó xác minh email của bạnl
  3. Tạo một file thiết kế Figma
  4. Bắt đầu tạo GUI (Giao diện người dùng đồ họa)



Định dạng thiết kế ở Figma [Top]

1. Tham khảo


Cách đặt tên là một yếu tố vô cùng quan trọng

Tên phần tử trong FigmaKhi phần tử ở Tkinter
ButtonButton
LineLine
TextName it anything
RectangleRectangle
TextAreaText Area
TextBoxEntry
ImageCanvas.Image()

Mã được tạo ra bởi Tkinter Designer dựa trên tên các phần tử trong thiết kế Figma của bạn, và do đó, bạn cần đặt tên cho các phần tử của mình một cách phù hợp. Trong Figma, đổi tên các phần tử bằng cách nhấp đúp vào chúng trong bảng Layers.


2. Hướng dẫn về các phần tử


  1. Trước tiên, tạo một khung chứa và đó sẽ là cửa sổ Tkinter của bạn.

  2. Thêm ảnh

    • IHình ảnh có thể được tạo bằng các hình dạng (shapes) và/hoặc hình ảnh (images)
    • Nếu bạn sử dụng nhiều hình dạng/ảnh, bạn phải nhóm chúng lại bằng cách chọn tất cả và nhấn CTRL/⌘ + G
    • Sau đó, đặt tên cho phần tử hoặc nhóm là "Image".

  3. Văn bản (Văn bản bình thường)

    • Sử dụng phím T để kích hoạt công cụ văn bản, sau đó thêm văn bản theo ý muốn
    • Văn bản không cần được đổi tên để sử dụng trong Tkinter Designer
    • Nhấn rõ nút Return hoặc Enter để chuyển xuống dòng tiếp theo.

  4. Entry (Người dùng nhập trong 1 dòng)

    • Kích hoạt công cụ Hình lập phương (rectangle) với R
    • Điều chỉnh Hình lập phương (rectangle) theo ý thích của bạn
    • Đảm bảo rằng Hình lập phương (rectangle) có tên là "TextBox"

  5. Vùng văn bản (Người dùng nhập nhiều dòng)

    • Kích hoạt công cụ Hình lập phương (rectangle) với R
    • Điều chỉnh Hình lập phương (rectangle) theo ý thích của bạn
    • Đảm bảo rằng Hình lập phương (rectangle) có tên là "TextArea"

  6. Hình lập phương

    • Kích hoạt công cụ Hình lập phương (rectangle) với R
    • Điều chỉnh Hình lập phương (rectangle) theo ý thích của bạn
    • Đảm bảo rằng Hình lập phương (rectangle) có tên là "Rectangle"

  7. Nút thông thường

    • Thêm một Hình lập phương để làm nút trong Giao diện người dùng đồ họa của bạn.
      • Tùy chọn: Thêm văn bản cho nút.
    • Chọn nút (Hình lập phương vừa tạo) và văn bản, sau đó nhóm chúng với phím CTRL/⌘ + G
    • Đặt tên cho nhóm là "Button"

Tham khảo video này nếu bạn gặp phải vấn đề



  1. Nút bo tròn
    • Add rectangle to serve as a button in your GUI
    • Thêm một Hình lập phương để làm nút trong Giao diện người dùng đồ họa của bạn.
      • Tùy chọn: Thêm văn bản cho nút. -Làm cho nút có hình dạng bo tròn bằng cách thêm bán kính góc bằng cách chọn Hình lập phương và thêm bán kính góc từ phía bên phải.Đọc thêm
    • Tạo một Hình lập phương có cùng kích thước với nút của bạn. Không làm cho nó bo tròn.
    • Thay đổi màu sắc của Hình lập phương để phù hợp với nền.
    • Tiếp theo, di chuyển Hình lập phương vừa tạo xuống phía dưới nút chính (Hình lập phương).
    • Chọn nút, Hình lập phương và văn bản tùy chọn (nếu có), sau đó nhóm chúng với phím CTRL/⌘ + G.
    • Đặt tên cho nhóm là "Button".

Tham khảo video này nếu bạn gặp phải vấn đề



Sử dụng Tkinter Designer [Top]

Các thông tin cần nhập

Có một số thông tin mà bạn sẽ cần thu thập để sử dụng Tkinter Designer.

1. Mã truy cập cá nhân

  1. Đăng nhập vào tài khoản Figma của bạn.

  2. Di chuyển đến Cài đặt.

  3. Trong tab Tài khoản, cuộn xuống đến Mã truy cập cá nhân.

  4. Nhập tên của mã truy cập cá nhân vào ô nhập và nhấn Enter.

  5. Mã truy cập cá nhân của bạn sẽ được tạo.

    • Sao chép mã truy cập này và lưu nó ở một nơi an toàn.
    • Mã này sẽ chỉ xuất hiện một lần và không thể sao chép lại

2. Lấy địa chỉ của file

  1. Trong tệp thiết kế Figma của bạn, nhấp vào nút Share ở thanh trên cùng, sau đó nhấp vào 🔗 Copy link

Sử dụng CLI

Sử dụng CLI rất đơn giản, chỉ cần cài đặt gói và chạy công cụ CLI.

Từ PyPi

Bạn có thể sử dụng lệnh dưới đây để kiểm tra bằng cách thay thế FILEURLvaˋFILE_URL và FIGMA_TOKEN bằng dữ liệu của bạn. Nếu bạn chưa có mã thông báo và liên kết, vui lòng tham khảo phần Các thông tin cần nhập.

pip install tkdesigner

tkdesigner $FILE_URL $FIGMA_TOKEN

Từ mã nguồn

Để sử dụng CLI từ mã nguồn, bạn cần sao chép kho mã và sau đó làm theo các hướng dẫn dưới đây.

Bạn có thể sử dụng lệnh dưới đây để kiểm tra bằng cách thay thế FILEURLvaˋFILE_URL và FIGMA_TOKEN bằng dữ liệu của bạn. Nếu bạn chưa có mã thông báo và liên kết, vui lòng tham khảo phần Các thông tin cần nhập.

$ python -m tkdesigner.cli $FILE_URL $FIGMA_TOKEN

# To learn more about how to use the cli, pass the --help flag
$ python -m tkdesigner --help

Kết quả

Mặc định, mã GUI sẽ được ghi vào tệp build/gui.py. Bạn có thể chỉ định đường dẫn đầu ra bằng cách sử dụng cờ -o và cung cấp đường dẫn.

Để chạy GUI đã tạo, hãy di chuyển đến thư mục bạn đã xây dựng (ví dụ: build/) và chạy nó như bất kỳ GUI Tkinter nào khác.

cd build
python3 gui.py

Sử dụng giao diện người dùng đồ họa (GUI)

Mở Tkinter Designer trước khi làm các bước sau


  1. Mở giao diện người dùng Tkinter Designer bằng cách:
cd Tkinter-Designer
cd gui
python3 gui.py
  1. Dán mã truy cập cá nhân của bạn vào ô Token ID trong Tkinter Designer.
  2. Dán liên kết vào ô File URL trong Tkinter Designer.
  3. Nhấp vào ô Output Path để mở trình duyệt tệp.
  4. Chọn một đường dẫn đầu ra và nhấp vào Select Folder.
  5. Nhấn Generate.

Các tệp kết quả từ Tkinter Designer sẽ được đặt trong thư mục đã chọn của bạn, trong một thư mục mới có tên là build. Chúc mừng bạn đã tạo thành công giao diện Tkinter của bạn bằng Tkinter Designer!



Gỡ lỗi [Trở lại đầu trang]

  • Các phần tử không hiển thị? Bị đặt sai vị trí?

  • Nút có màu nền xám không đúng ý?

    • Hãy đảm bảo bạn đã thêm một hình chữ nhật phía sau phần tử nút của bạn và màu sắc Fill của nó giống với màu nền.

  • Các phần tử không chính xác?

  • Cửa sổ lớn hơn màn hình?

    • Giảm kích thước các phần tử trong Figma.

  • Không tạo ra các tệp?

    • Khởi động lại Tkinter Designer.
    • Kiểm tra lại mã thông báo và liên kết.
    • Đảm bảo thiết kế của bạn có một khung (Frame).

  • Có vấn đề khác?