我如何制作窗口平移的 tkinter GUI

Question

这是我的代码。

用它我可以打开并播放一张可爱的音乐专辑，它会在垂直的黑色左侧窗格上显示曲目。

我一直在尝试使所述窗口“可平移”，以便我可以将其拖动/展开到右侧以显示任何已被截断的文本。

这对我来说只是一个爱好，所以请原谅缺乏知识/礼仪。

this is my code

import tkinter as tk
from tkinter import ttk
from tkinter import *
from tkinter import filedialog
import pygame
import os
import customtkinter as ctk 
from PIL import Image, ImageTk


root = tk.Tk()
root.title('Music Player')
pygame.mixer.init()

menubar = Menu(root)
root.config(menu=menubar)   

songs = []
curent_song = ""
paused = False



def load_music():
    global current_song
    root.directory = filedialog.askdirectory()

    for song in os.listdir(root.directory):
        name, ext = os.path.splitext(song)
        if ext == '.mp3':
            songs.append(song)

    for song in songs:
        songlist.insert("end", song)

    songlist.selection_set(0)
    current_song = songs [songlist.curselection()[0]]

def play_music():
    global current_song, paused

    if not paused:
        pygame.mixer.music.load(os.path.join(root.directory, current_song))
        pygame.mixer.music.play()
    else:
        pygame.mixer.music.unpause()
        paused = False

def pause_music():
    global paused
    pygame.mixer.music.pause()
    paused = True



def next_music():
    global current_song, paused


    try:
        songlist.selection_clear(0, END)
        songlist.selection_set(songs.index(current_song) + 1)
        current_song = songs[songlist.curselection()[0]]
        play_music()
    except:
        pass

def previous_music():
    global current_song, paused

    try:
        songlist.selection_clear(0, END)
        songlist.selection_set(songs.index(current_song) -1)
        current_song = songs[songlist.curselection()[0]]
        play_music()
    except:
        pass

organise_menu = Menu(menubar , tearoff=False)
organise_menu.add_command(label='select Folder' , command=load_music)
menubar.add_cascade(label='organise' , menu=organise_menu)


#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~   STYLING


s = ttk.Style()

s.configure('mainFrame.TFrame',     background = '#7FFF00') #GREEN
s.configure('Frame2.TFrame',        background = '#FF1493') #PINK!
s.configure('Frame3.TFrame',        background = '#FF1493') #PINK!
s.configure('Frame4.TFrame',        background = '#7FFF00')#GREEN


s.configure('Frame5.TFrame',        background = '#7FFF00')#GREEN
s.configure('Frame6.TFrame',        background = '#FF1493')#PINK!
s.configure('Frame7.TFrame',        background = '#FF1493')#PINK!
s.configure('Frame8.TFrame',        background = '#7FFF00')#GREEN
s.configure('Horizontal.TFrame',    background = '#CDC5BF')
s.configure('Verticle.TFrame',      background = '#FFD93L')




#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~   WIDGETS

mainFrame = ttk.Frame(root, width = 250, height = 250, style='mainFrame.TFrame')
mainFrame.grid(row = 0, column = 1, sticky = 'NSEW')

Frame2 = ttk.Frame(root, width = 250, height = 250, style = 'Frame2.TFrame')
Frame2.grid(row = 1, column = 1, sticky = 'NSEW')

Frame3 = ttk.Frame(root, width = 250, height = 250, style = 'Frame3.TFrame')
Frame3.grid(row = 0, column = 2, sticky = 'NSEW')

Frame4 = ttk.Frame(root, width = 250, height = 250, style = 'Frame4.TFrame')
Frame4.grid(row = 1, column = 2, sticky = 'NSEW')

Frame5 = ttk.Frame(root, width = 250, height = 250, style = 'Frame5.TFrame')
Frame5.grid(row = 0, column = 3, sticky = 'NSEW')

Frame6 = ttk.Frame(root, width = 250, height = 250, style = 'Frame6.TFrame')
Frame6.grid(row = 1, column = 3, sticky = 'NSEW')

Frame7 = ttk.Frame(root, width = 250, height = 250, style = 'Frame7.TFrame')
Frame7.grid(row = 0, column = 4, sticky = 'NSEW')

Frame8 = ttk.Frame(root, width = 250, height = 250, style = 'Frame8.TFrame')
Frame8.grid(row = 1, column = 4, sticky = 'NSEW')


songlist = Listbox(root, bg="black", fg="white", borderwidth=0, highlightthickness=0, width=25 , height=15)
songlist.grid(row = 0, rowspan = 2, column = 0, sticky = 'NSEW')






#~~~~~~~~~~~~~~~~~~~~~~~~~~~~   GRID CONFIGURATION

root.columnconfigure(0, weight = 1)
root.columnconfigure(1, weight = 2)
root.columnconfigure(2, weight = 2)
root.columnconfigure(3, weight = 2)
root.columnconfigure(4, weight = 2)
root.rowconfigure(0, weight = 1)
root.rowconfigure(1, weight = 1)
root.rowconfigure(2, weight = 0)


#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ BUTTONS

play_btn_image = PhotoImage(file='play.png')
pause_btn_image = PhotoImage(file='pause.png')
next_btn_image = PhotoImage(file='next.png')
back_btn_image = PhotoImage(file='back.png')

control_frame = Frame(root)
control_frame.grid()

#~~~~~~~~~~~~~CHANGED .PACK TO .GRID

play_btn = Button(control_frame, image=play_btn_image, borderwidth=0, command=play_music)
pause_btn = Button(control_frame, image=pause_btn_image, borderwidth=0, command=pause_music)
next_btn = Button(control_frame, image=next_btn_image, borderwidth=0, command=next_music)
back_btn = Button(control_frame, image=back_btn_image, borderwidth=0, command=previous_music)


play_btn.grid(row=3, column=1, padx=7, pady=10)
pause_btn.grid(row=3, column=2, padx=7, pady=10)
next_btn.grid(row=3, column=3, padx=7, pady=10)
back_btn.grid(row=3, column=0, padx=7, pady=10)





root.mainloop()

我尝试过重新排列多行代码，有时我会收到错误消息，有时我会得到我想要的窗口/小部件，但一切都出问题了。

截图

Answer 1

您可以使用

PanedWindow

并将

Listbox

放在左窗格中，并将所有这些颜色框架放在另一个框架中，该框架放在右窗格中。

...

# PanedWindow
paned = ttk.PanedWindow(root, orient="horizontal")
paned.grid(row=0, column=0, sticky="nsew") # put at row 0 column 0

songlist = Listbox(paned, bg="black", fg="white", borderwidth=0, highlightthickness=0, width=25 , height=15)
# frame for those colorful frames
widget_frame = ttk.Frame(paned)

paned.add(songlist)     # add to left pane
paned.add(widget_frame) # add to right pane

#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~   WIDGETS in widget_frame

# create colorful frames as children of widget_frame

mainFrame = ttk.Frame(widget_frame, width = 250, height = 250, style='mainFrame.TFrame')
mainFrame.grid(row = 0, column = 0, sticky = 'NSEW')

Frame2 = ttk.Frame(widget_frame, width = 250, height = 250, style = 'Frame2.TFrame')
Frame2.grid(row = 1, column = 0, sticky = 'NSEW')

Frame3 = ttk.Frame(widget_frame, width = 250, height = 250, style = 'Frame3.TFrame')
Frame3.grid(row = 0, column = 1, sticky = 'NSEW')

Frame4 = ttk.Frame(widget_frame, width = 250, height = 250, style = 'Frame4.TFrame')
Frame4.grid(row = 1, column = 1, sticky = 'NSEW')

Frame5 = ttk.Frame(widget_frame, width = 250, height = 250, style = 'Frame5.TFrame')
Frame5.grid(row = 0, column = 2, sticky = 'NSEW')

Frame6 = ttk.Frame(widget_frame, width = 250, height = 250, style = 'Frame6.TFrame')
Frame6.grid(row = 1, column = 2, sticky = 'NSEW')

Frame7 = ttk.Frame(widget_frame, width = 250, height = 250, style = 'Frame7.TFrame')
Frame7.grid(row = 0, column = 3, sticky = 'NSEW')

Frame8 = ttk.Frame(widget_frame, width = 250, height = 250, style = 'Frame8.TFrame')
Frame8.grid(row = 1, column = 3, sticky = 'NSEW')

#~~~~~~~~~~~~~~~~~~~~~~~~~~~~   GRID CONFIGURATION

root.columnconfigure(0, weight = 1)
root.rowconfigure(0, weight = 1)

...

control_frame = Frame(root)
control_frame.grid(row=1, column=0, sticky="ew") # put at row 1 column 0

...

然后，您可以使用

PanedWindow

小部件的垂直手柄水平调整列表框的大小：