[Python初心者] Tkinterでアプリを作成したい。

Question

前提・実現したいこと

Tkinterを使用して動画を再生し、コマ送りできるアプリを作成しようとしています。
GUIのデザインの書き方でClassを使わない方法で書いたのですが、わかりづらくなってしまいわかりやすくしたいのですがどうすればいいのかわかりません。

・Clearボタンを右寄りにしたい
・Input PathのText欄とOutputのText欄の位置を揃えたい

発生している問題・エラーメッセージ

該当のソースコード

import os
import sys
import tkinter as tk
from tkinter import filedialog

#=-=-=-GUI-=-=-=
#Create Instance
win = tk.Tk()
win.title("IVT Transcode app")

win.geometry("800x600")  #Turn on for locked Resolution
win.configure(background='#52514F')  # DARK MODE! | ダークモード!
icon_photo = tk.PhotoImage(file = '/Volumes/UNSUNG HERO/PYTHON/IVTC_tool/film.png') # icon file | アイコンファイル
win.iconphoto(False, icon_photo)  # Sets the icon | アイコン
AppTitle = tk.Label(win, text="TDBT GUI v0.1", fg="white", bg="#52514F", font=('Verdana', 20, 'bold'))

#----Frames | 枠組----
FrameOne = tk.LabelFrame(win, text="Input Settings", fg="white", bg="#52514F", padx="20", pady="10")
FrameTwo = tk.LabelFrame(win, text="Output Settings", fg="white", bg="#52514F", padx="20", pady="10")
FrameThree = tk.LabelFrame(win, text="Preview", fg="white", bg="#52514F", pady="30", padx="10")

#--Widgets | 特徴----
#Input Widgets | 入力
Text_Input_Path = tk.Label(FrameOne, text="Input Path", fg="white", bg="#52514F", font=('Helvetica', 10))
Field_Input_Path = tk.Entry(FrameOne, fg="black", highlightbackground="#52514F")
Button_Input_Path = tk.Button(FrameOne, text="Open File", highlightbackground="#52514F", font=('Helvetica', 10))

#Output Widgets | 出力
Text_Output_Path = tk.Label(FrameTwo, text="Output Path", fg="white", bg="#52514F", font=('Helvetica', 10))
Text_Output_Name = tk.Label(FrameTwo, text="Output Filename", fg="white", bg="#52514F", font=('Helvetica', 10))
Field_Output_Path = tk.Entry(FrameTwo, fg="black", highlightbackground="#52514F")
Field_Output_Name  = tk.Entry(FrameTwo, fg="black", highlightbackground="#52514F")
Button_Output_Path = tk.Button(FrameTwo, text="Select Path", highlightbackground="#52514F", pady='2', font=('Helvetica', 10))
Extension_Value = tk.StringVar()
Extension_Value.set(".MOV") #' default value as MOV | デフォルトMOV

3Extension_Option = tk.OptionMenu(FrameTwo, Extension_Value)#
"""Extension_Option.config(bg='#52514F', font=('Helvetica', 10), pady='2')"""

#Preview Widgets | プレビュー
Preview_Start = tk.Button(FrameThree, text="Start", fg="black", bg="#52514F", font=('Helvetica', 10))

#---- Button and Text | ボタンとテキスト-----
ButtonOne = tk.Button(win,text="Previwe", highlightbackground="#52514F", padx=20, pady=10)
ButtonTwo = tk.Button(win, text="Clear", highlightbackground="#52514F", padx=20, pady=10)
Button_ffm_simple = tk.Button(win, text="Simple Transcode", highlightbackground="#52514F", padx=20, pady="10")
TextOutputText = tk.Text(win, height=8, width=110, bg="grey", highlightbackground='grey')

#----Grid | 設計----
AppTitle.grid(column=2, row=0, columnspan=5, pady="10")

#Frames | 枠組
FrameOne.grid(column=2, row=1, padx='10', pady='10', sticky='nsew')
FrameTwo.grid(column=2, row=2, padx='10', pady='10', sticky='nsew')
FrameThree.grid(column=3, columnspan=5, row=1, rowspan=6, padx='10', pady='10', sticky='nsew')

#Input | 入力
Text_Input_Path.grid(column=0, row=0, sticky='w')
Field_Input_Path.grid(column=1, row=0, sticky='nsew')
Button_Input_Path.grid(column=2, row=0, sticky='nsew')

#Output | 出力
Text_Output_Path.grid(column=0, row=0, sticky='w')
Field_Output_Path.grid(column=1, row=0, sticky='nsew')
Button_Output_Path.grid(column=2, row=0, sticky='nsew')
Text_Output_Name.grid(column=0, row=1, sticky='w')
Field_Output_Name.grid(column=1, row=1, sticky='nsew')
#Extension_Option.grid(column=2, row=1, sticky='nsew')

#Preview | プレビュー
Preview_Start.grid(column=3, row=1, sticky='nsew')

#Buttons Grid | 設計のボタン
ButtonOne.grid(column=2, row=8, sticky='w', pady=1, padx=10)
ButtonTwo.grid(column=3, row=20, sticky='w', pady=1, padx=10)
Button_ffm_simple.grid(column=2, row=10, sticky='w', pady=10, padx=10)
TextOutputText.grid(column=2, columnspan=5, row=11, rowspan=5, sticky='nsew', pady=10, padx=10)


#Start the GUI | GUI開始
win.mainloop()

試したこと

ファイルのInput/Output, Button, PreviewなどをHTML,CSSを描くときのようにグループ化してわかりやすくしたいです。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[t_obara]

まず、ソースを```で囲ってください。

[退会済みユーザー]

用語があまりよくわからないのですが、コメントとして#で記載していた部分を"""に変えさせていただきました。

[t_obara]

質問を投稿する際にテンプレートが出てきたと思うのですが、質問を投稿後にご自身の質問内容をプレビューで確認されるとよろしいかと。全く見易くなっていません。これだと回答がつきにくくなります。

ソース部分全てを```と```で囲うのです。

[退会済みユーザー]

ご親切にありがとうございます。
修正させて頂きました。

Answer 1

・Clearボタンを右寄りにしたい

grid()で配置されている以上は、カラムが設定されている為カラムを調整する事が懸命です。
更にstickyオプションもwとなっている為、eにすべきです。

# 75行目
ButtonTwo.grid(column=5, row=20, sticky='e', pady=1, padx=10)

・Input PathのText欄とOutputのText欄の位置を揃えたい

これに関しては、親フレームがFrameOneとFrameTwoとで異なってしまっている為
いくらカラムを合わせようとずれてしまうのは病むを得ません。
原因としてはカラム=0に配置されているLabelのtextの最大文字数が異なるからです。
FrameOneでは、カラム=0に配置されているLabelのtextの最大文字数は10文字です。(半角スペース含む)
そしてFrameTwoではカラム=0に配置されているLabelのtextの最大文字数は15文字です。(半角スペース含む)
簡易的な解決策は文字数をあわせるか、padxを設定する事でしょう。

# 58行目
Text_Input_Path.grid(column=0, row=0, padx=(0,37), sticky='w')

Comments

[退会済みユーザー]

教えていただきありがとうございます。
文字数を合わせました。