Skip to content

Latest commit

 

History

History
266 lines (182 loc) · 8.02 KB

instructions.zh-CN.md

File metadata and controls

266 lines (182 loc) · 8.02 KB
Raw

如何使用 Tkinter Designer

目录

  1. 入门

    1. 安装Python
    2. Install Tkinter Designer
    3. 做一个 Figma Account

  2. 格式化你的 Figma Design

    1. 参考
    2. 元素指南

  3. 使用 Tkinter Designer

    1. Personal Access Token
    2. File URL
    3. 使用命令行
    4. 使用图形界面

  4. 故障排除



入门 [Top]

1.安装Python

在使用 Tkinter Designer 之前，您需要安装 Python。

在本指南的后面部分，您将使用 Python 包安装程序 (pip)，这可能需要您将 Python 添加到系统 PATH 中。


2. 安装 Tkinter 设计器

安装 Python 后，您可以从 官方存储库 下载 Tkinter Designer。

在右侧边栏上，单击最新版本，然后在 Assets 下，选择 tkinter_designer.exe。 下载完可执行文件后，您就可以运行程序了！

要从源代码运行 Tkinter Designer，请按照以下说明进行操作。

  1. 通过手动下载或使用 git 下载 Tkinter Designer 的源文件：-

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

  2. 将您的工作目录更改为 Tkinter Designer。

    cd Tkinter-Designer

  3. 通过运行安装必要的依赖项

    pip install -r requirements.txt

    安装必要的依赖项

    • 如果 pip 不起作用，还可以尝试以下命令：
      • pip3 install -r requirements.txt
      • python -m pip install -r requirements.txt
      • python3 -m pip install -r requirements.txt
    • 如果这仍然不起作用，请确保将 Python 添加到 PATH。

    这将安装所有要求和 Tkinter Designer。 在使用 Tkinter Designer 之前，您需要按照以下说明创建 Figma 文件。

    如果您已经创建了文件，请跳至 Using Tkinter Designer 部分。


3. 创建一个 Figma 帐户

  1. 在网页浏览器中，导航至 figma.com 并点击“注册”
  2. 输入您的信息并验证您的电子邮件
  3. 创建一个新的 Figma Design 文件
  4. 开始制作你的 GUI



格式化你的 Figma 设计[Top]

1. 参考


命名很重要

Figma 元素名称 Tkinter 元素
Button Button
Line Line
Rectangle Rectangle
TextArea Text Area
TextBox Entry
Image Canvas.Image()

Tkinter Designer 生成的代码基于 Figma 设计中的元素名称，因此，您需要相应地命名元素。 在 Figma 中，通过在“图层”面板中双击元素来重命名元素。


2. 元素指南


  1. 首先，创建一个框架作为您的 Tkinter 窗口。

  2. 添加图片

    • 可以使用形状和/或图像创建图像
    • 如果您使用多个形状/图像，您必须通过选择它们并按 CTRL/⌘ 将它们组合在一起。 + G
    • 在此之后将元素或组命名为“Image”。

  3. 文本（普通文本）

    • 使用 T 键激活文本工具，然后根据需要添加文本
    • 在 Tkinter Designer 中使用时不必重命名文本
    • 明确按下 Return 或 Enter 键移动到下一行。

  4. 输入（单行用户输入）

    • 使用 R 激活矩形工具
    • 根据您的喜好调整矩形
    • 确保矩形命名为“TextBox”

  5. 文本区域（多行用户输入）

    • 使用 R 激活矩形工具
    • 根据您的喜好调整矩形
    • 确保矩形命名为“TextArea”

  6. 矩形

    • 使用 R 激活矩形工具
    • 根据您的喜好调整矩形
    • 确保矩形被命名为“Rectangle”

  7. 按钮

    • 添加一个元素作为 GUI 中的按钮
      • 可选：为按钮添加文本
    • 在按钮下方的图层上创建一个矩形
    • 更改矩形的颜色以匹配背景
    • 选择按钮、矩形和任何可选文本，然后将它们与CTRL/⌘ + G
    • 将组命名为“Button”



使用 Tkinter Designer [Top]


1. 个人访问令牌

  1. 登录您的 Figma 帐户
  2. 导航到设置
  3. 在 Account 选项卡中，向下滚动到 Personal access tokens
  4. 在条目表单中输入您的访问令牌的名称，然后按 Enter
  5. 您的个人访问令牌将被创建。
    • 复制此令牌并将其保存在安全的地方。
    • 您将不会再有机会复制此令牌。
  6. 将您的个人访问令牌粘贴到 Tkinter Designer 中的 Token ID 表单中

2. 文件地址

  1. 在您的 Figma 设计文件中，单击顶部栏中的 Share 按钮，然后单击 🔗 复制链接
  2. 将链接粘贴到 Tkinter Designer 中的 File URL 表单中

使用 CLI

使用 CLI 就像安装软件包和运行 CLI 工具一样简单。

您可以通过将 $YOUR_FIGMA_TOKEN 替换为您生成的 Figma Personal Access Token 来使用以下命令作为测试。 如果您还没有获得令牌，请参阅 Required Inputs Section 。

# 示例数据
$ python -m tkdesigner.cli https://www.figma.com/file/WVLnulVsI177tvnxSdqOUZ/Untitled?node-id=0%3A1 $YOUR_FIGMA_TOKEN -f
# 要了解有关如何使用 cli 的更多信息，请传递 --help 标志
$ python -m tkdesigner.cli --help

默认情况下，GUI 代码将写入 build/gui.py。 要运行生成的 GUI，请 cd 进入您构建它的目录（例如 build/）并像运行任何 Tkinter GUI 一样运行它。

cd build
python3 gui.py

使用 GUI


1.打开TKinter Designer 
cd Tkinter-Designer
cd gui
python3 gui.py
  1. 将您的 个人访问令牌 粘贴到 Tkinter Designer 中的 令牌 ID 表单中
  2. 将链接粘贴到 Tkinter Designer 中的 File URL 表单中
  3. 单击输出路径表单打开文件浏览器
  4. 选择一个输出路径并点击Select Folder
  5. 按生成

Tkinter Designer 的输出文件将放置在您选择的目录中，位于名为 build 的新文件夹中。 恭喜，您现在已经使用 Tkinter Designer 创建了您的 Tkinter GUI！

故障排除 [Top]

  • 元素不可见？ 放错地方了？

  • 按钮有意外的灰色背景？

    • 确保您在按钮元素后面添加了一个矩形，并且其填充颜色与背景的相同

  • 不正确的元素？

  • 窗口比屏幕大？

    • 减少 Figma 中元素的大小

  • 文件没有生成？

    • 重启 Tkinter 设计器
    • 仔细检查令牌和 URL
    • 确保你的设计有一个框架

  • 还有什么？