代码之家  ›  专栏  ›  技术社区  ›  Kyu96

带有百分比标签的进度条?

  •  2
  • Kyu96  · 技术社区  · 7 年前

    如何将标签放在显示百分比的进度条中间? 问题是python不支持标签背景的透明度,所以我不知道如何解决这个问题。

    1 回复  |  直到 7 年前
        1
  •  16
  •   j_4321    3 年前

    这可以使用 ttk.Style . 其目的是修改 Horizontal.TProgressbar 样式(与 Vertical.TProgressbar 对于垂直进度条),要在进度条内添加标签,请执行以下操作:

    通常的 水平的t压力棒 布局:

    [('Horizontal.Progressbar.trough',
      {'children': [('Horizontal.Progressbar.pbar',
         {'side': 'left', 'sticky': 'ns'})],
       'sticky': 'nswe'})]
    

    附加标签:

    [('Horizontal.Progressbar.trough',
      {'children': [('Horizontal.Progressbar.pbar',
         {'side': 'left', 'sticky': 'ns'})],
       'sticky': 'nswe'}),
     ('Horizontal.Progressbar.label', {'sticky': 'nswe'})]
    

    然后,可以使用更改标签的文本 style.configure .

    代码如下:

    import tkinter as tk
    from tkinter import ttk
    
    root = tk.Tk()
    
    style = ttk.Style(root)
    # add label in the layout
    style.layout('text.Horizontal.TProgressbar', 
                 [('Horizontal.Progressbar.trough',
                   {'children': [('Horizontal.Progressbar.pbar',
                                  {'side': 'left', 'sticky': 'ns'})],
                    'sticky': 'nswe'}), 
                  ('Horizontal.Progressbar.label', {'sticky': 'nswe'})])
    # set initial text
    style.configure('text.Horizontal.TProgressbar', text='0 %', anchor='center')
    # create progressbar
    variable = tk.DoubleVar(root)
    pbar = ttk.Progressbar(root, style='text.Horizontal.TProgressbar', variable=variable)
    pbar.pack()
    
    def increment():
        pbar.step()  # increment progressbar 
        style.configure('text.Horizontal.TProgressbar', 
                        text='{:g} %'.format(variable.get()))  # update label
        root.after(200, increment)
        
    increment()
    
    root.mainloop()
    

    screenshot of the result

    样式设置

    标签的字体、颜色和位置可以使用 风格配置 . 例如,

    style.configure('text.Horizontal.TProgressbar', foreground="red", 
                    font='Arial 20', anchor='w')
    

    给予 screenshot of result

    多个进度条

    文本是通过样式设置的,因此要有多个带有不同标签的ProgressBar,需要为每个ProgressBar使用不同的样式。但是,无需为每个样式设置布局:创建布局 'text.Horizontal.TProgressbar' 与上面的代码类似,然后使用子样式 'pb1.text.Horizontal.TProgressbar' , 'pb2.text.Horizontal.TProgressbar' , ... 对于每个进度条。然后,可以使用更改单个进度条的文本

    style.configure('pb1.text.Horizontal.TProgressbar', text=...)