Python で GUI プログラムを書くのは醜いなどと誰が言ったでしょうか?それは、美しくする方法を知らないからです。

私たちの日常の仕事や勉強では、ファイルのバッチ処理や画像のバッチ処理など、さまざまな自動化されたタスクを完了するための単純な Python GUI ツールを作成することがよくあります。これらのツールを作成するとき、機能の実装のみに焦点を当て、ページの美化を無視することがよくあります。これにより、Python で構築された GUI プログラムが人々の目に比較的低くなります。今日は機能を最初に無視します。ページに焦点を当てます。美化、純粋な Python で書かれた GUI プログラムがどれほど美しいかを見てみましょう。

ページ レイアウト

最初に基本的な GUI レイアウトを完成させます

16 進数変換ツールを作成し、次に一般的なレイアウトを作成するとします。

上の図は、Python に付属の GUI ライブラリである tkinter を介して完全に記述されています。

コードの一部は次のとおりです:

from tkinter import ttk
from tkinter import *
class Transform():
 def __init__(self):
 self.root = Tk()
 self.root.title("进制转换工具")
 self.root.geometry("600x280")
 self.root.resizable(False, False)
 self.var = StringVar()
 self.values = ['2', '8', '10', '16', '32', '36', '58', '62']
 self.myWidget()
 self.myLayout()
 def myWidget(self):
 self.container = Frame(self.root)
 # 转换设置区域
 self.lf_group1 = LabelFrame(master=self.container, text="转换设置")
 self.cb = Checkbutton(self.lf_group1, text="是否自动转换")
 self.cb.invoke()
 self.bt = Button(self.lf_group1, text='转换')
 self.en = Entry(self.lf_group1, text='warning')
 # 进制选择区域
 self.lf_group2 = LabelFrame(master=self.container, text="进制选择")
 self.lb1 = Label(self.lf_group2, text="请选择待转换的进制")
 self.cbo1 = ttk.Combobox(
 master=self.lf_group2,
 values=self.values
 )
 self.cbo1.set(self.values[2])
 self.lb2 = Label(self.lf_group2, text="请选择转换后的进制")
 self.cbo2 = ttk.Combobox(
 master=self.lf_group2,
 values=self.values,
 )
 self.cbo2.set(self.values[0])
 # 进制输出区域
 self.txt = Text(master=self.container, height=5, width=50)
 def myLayout(self):
 self.container.pack(side=LEFT, fill=BOTH, expand=YES, padx=5)
 self.lf_group1.pack(fill=X, side=TOP)
 self.lf_group2.pack(fill=X, pady=10, side=TOP)
 self.cb.pack(side=LEFT, expand=YES, padx=5, fill=X)
 self.bt.pack(side=LEFT, expand=YES, padx=5, fill=X)
 self.en.pack(side=LEFT, expand=YES, padx=5, fill=X)
 self.lb1.pack(side=LEFT, expand=YES, padx=5)
 self.cbo1.pack(side=LEFT, expand=YES, pady=5)
 self.lb2.pack(side=LEFT, expand=YES, padx=5)
 self.cbo2.pack(side=LEFT, expand=YES, pady=5)
 self.txt.pack(side=LEFT, anchor=NW, pady=5, fill=BOTH, expand=YES)
 def run(self):
 self.container.mainloop()
if __name__ == '__main__':
 trans = Transform()
 trans.run()

コードは複雑ではなく、レイアウトも使用される最も基本的なパック方法です。GUI プログラム全体は比較的きれいに見えますが、 、色が単調で各コンポーネントもあまり美しくないので、次は美しくしましょう。

ページの美化

まず、手動で CSS を設定してページを美化しますが、ここでは主に tkonter ライブラリの config 属性を使用します。

最初に背景色を設定します:

self.container.config(bg='#073642')

コンテナ全体の背景色を #073642

次に設定します。各コンポーネントのスタイルを個別に設定します:

self.lf_group1.config(bg='#073642', fg="white")
self.lf_group2.config(bg='#073642', fg="white")
self.cb.config(bg='#073642', selectcolor='#073642', activebackground='#073642',
activeforeground='#073642', fg="white")
self.bt.config(bg="azure3")
self.en.config(highlightbackground="#0b5162", highlightcolor="#0b5162",
insertofftime=500, insertontime=500, fg="Gainsboro", insertbackground="Gainsboro",
bg="#073642", highlightthickness=2, relief="solid")
self.lb1.config(bg='#073642', activebackground='#073642',
 activeforeground='#073642', fg="white")
self.lb2.config(bg='#073642', activebackground='#073642',
 activeforeground='#073642', fg="white")
self.txt.config(insertofftime=500, insertontime=500, fg="Gainsboro", insertbackground="Gainsboro",
 wrap="none", bg='#073642')

は config を通じて設定されます。色の選択については、オンライン カラー セレクターを通じて選択できます。

• https://tools.kalvinbg.cn/dev/colorPicker 次に、ドロップダウン ボックスのスタイルを設定します。ドロップダウン ボックス コンポーネントには特別な点がいくつかあります。
  

このコンポーネントは ttk コンポーネントに属しているため、スタイルの設定はテーマを通じて行う必要があります。コードは次のとおりです:

combostyle = ttk.Style()
combostyle.theme_create('combostyle', parent='alt',
 settings={'TCombobox':
 {'configure':
 {
 'foreground': 'white',
 'selectbackground': '#073642',# 选择后的背景颜色
 'fieldbackground': '#073642',# 下拉框颜色
 'background': '#073642',# 下拉按钮背景颜色
 "font": 10,# 字体大小
 }}}
 )
combostyle.theme_use('combostyle')

このように、 GUI プログラム全体のスタイルが設定されました。最終的な効果を見てみましょう:

見た目が数レベル向上していることがはっきりとわかります。 ！

ttkbootstrap を使用してページを美化する

もちろん、よりシンプルで効果的な美化方法があります。それは、ttkbootstrap ライブラリを使用してページを美化することです。

最初に pip 経由で ttkbootstrap ライブラリをインストールします:

pip install ttkbootstrap

次に、プロジェクト内のライブラリを参照します:

import ttkbootstrap as ttk
from ttkbootstrap.constants import *
class MainCreator(ttk.Window):
 def __init__(self):
 super().__init__("进制转换工具", themename="solar", resizable=(False, False))# 设置一个主题

この時点でレイアウトが完了しますその時点で、ページの全体的なスタイルはテーマ Solar のスタイルになりました。もちろん、さまざまなコンポーネントに bootstyle 属性を追加して、より多くのスタイル効果を実現することもできます。

def create_frame(self):
 """Create all the frame widgets"""
 container = ttk.Frame(self)
 container.pack(side=LEFT, fill=BOTH, expand=YES, padx=5)
 color_group = ttk.Labelframe(
 master=container, text="转换设置", padding=10
 )
 color_group.pack(fill=X, side=TOP)
 self.cb = ttk.Checkbutton(color_group, text="是否自动转换", variable=self.cbvar)
 self.cb.invoke()
 self.bt = ttk.Button(color_group, text='转换', bootstyle='success')
 self.en = ttk.Entry(color_group, text='warning', bootstyle='warning')
 self.cb.pack(side=LEFT, expand=YES, padx=5, fill=X)
 self.bt.pack(side=LEFT, expand=YES, padx=5, fill=X)
 self.en.pack(side=LEFT, expand=YES, padx=5, fill=X)
 cr_group = ttk.Labelframe(
 master=container, text="进制选择", padding=10
 )
 cr_group.pack(fill=X, pady=10, side=TOP)
 values = ['2', '8', '10', '16', '32', '36', '58', '62']
 cr3 = ttk.Label(cr_group, text="请选择待转换的进制")
 cr3.pack(side=LEFT, expand=YES, padx=5)
 self.cbo1 = ttk.Combobox(
 master=cr_group,
 values=values,
 )
 self.cbo1.pack(side=LEFT, expand=YES, pady=5)
 self.cbo1.set(values[2])
 cr5 = ttk.Label(cr_group, text="请选择转换后的进制")
 cr5.pack(side=LEFT, expand=YES, padx=5)
 self.cbo2 = ttk.Combobox(
 master=cr_group,
 values=values,
 )
 self.cbo2.pack(side=LEFT, expand=YES, pady=5)
 self.cbo2.set(values[0])
 self.txt = ttk.Text(master=container, height=5, width=50, wrap="none")
 self.txt.pack(side=LEFT, anchor=NW, pady=5, fill=BOTH, expand=YES)

最終的な効果は次のとおりです:

このライブラリを使用した全体的な効果は、追加するよりもさらに美しいことがわかります。 CSSスタイルを手動で設定できるようになり、さらに便利になりました！

さて、今日共有した内容はこれですべてです。また次回お会いしましょう~

以上がPython で GUI プログラムを書くのは醜いなどと誰が言ったでしょうか?それは、美しくする方法を知らないからです。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。