python custom tkinter_ tabのサイズの幅を広くするには?


class MyApp(ctk.CTk):


def __init__(self):

        

super().__init__()

        

ctk.set_appearance_mode("dark") 


self.title("CustomTkinter Tab Layout")

self.geometry("500x500")


                

# Define tab control

self.tab_control

 = ctk.CTkTabview(app, width=500, height=550)


self.tab_control.pack(pady=10, padx=10, 

                fill="both", expand=True)


                       

# Add tabs

tab1 = tab_control.add("Tab 1")

tab2 = tab_control.add("Tab 2")

tab3 = tab_control.add("Tab 3")


tab_control.set("Tab 1")  # Set default tab


#

# tab01 content

#


# Label

self.label

 = ctk.CTkLabel( tab1, 

 text="Pokemon Center Tool", font=("Arial", 14))


self.label.place(x=180, y=10)

        

# Entry & TextVar

self.text_var = ctk.StringVar(value="galapagosbreeze21@gmail.com")

self.text_var2 = ctk.StringVar(value="febluebird2015")


# Entries

self.entry1 = ctk.CTkEntry( tab1, textvariable=self.text_var, width=220, height=30, border_width=1, border_color="#FFCC00" )

self.entry1.place(x=20, y=45)



self.entry2

 = ctk.CTkEntry( tab1, 

 textvariable=self.text_var2, width=220, height=30,

            border_width=1, border_color="#FFCC00" )


self.entry2.place(x=250, y=45)



# ボタン: recaptchaまでの動作

self.btn_save_account_info = ctk.CTkButton(


master= tab1,

text="アカウントを保存",

            

border_width=1,      # ボーダー幅



border_color="#4578C1", # ボーダー色

            

fg_color="#353535",

text_color="#EEEEEE",

            

width=450,

height=30,

            

command=self.run_login_thread01

            

)

        

self.btn_save_account_info.place(x=20, y=95)


#

# end of tab01 content


    

#

# tab02 content

#


# Label email

self.label_tab02_email

 = ctk.CTkLabel( tab2, text="email : ", font=("Arial", 14))


self.label_tab02_email.place(x=20, y=20)


self.box_email = ctk.CTkTextbox( tab2, width=300, height=30)

self.box_email.place(x=120, y=10)


# 既存の内容を削除

self.box_email.delete("1.0", "end")  

# 新しい文字列をセット

self.box_email.insert(

    "1.0", "ここに新しい文字列をセットしました!")  


# Label password

self.label_tab02_password

 = ctk.CTkLabel( tab2, 

 text="password : ", font=("Arial", 14))


self.label_tab02_password.place(x=20, y=50)


self.box_password

 = ctk.CTkTextbox( tab2, width=300, height=30)


self.box_password.place(x=120, y=60)


# 既存の内容を削除

self.box_password.delete("1.0", "end")  


# 新しい文字列をセット

self.box_password.insert(

    "1.0", "ここに新しい文字列をセットしました!")  



self.txt_content = ""


self.btn_file_picker = ctk.CTkButton(


#frame_content, text="TXTの読み込み", command=load_txt_file


tab2,

            

command = self.load_txt_file,

text="TXTの読込",

#bg="blue",

# ボタンの背景色をRGB (200, 120, 200)に設定           

fg_color="#6B45D2",  

text_color="white",

width=160,

height=30


)

self.btn_file_picker.place(x=20, y=125)



# ボタン: recaptchaまでの動作

self.btn_action01 = ctk.CTkButton(

        

master = tab2,

text="ログイン 01",

            

border_width=1,      # ボーダー幅

border_color="#4578C1", # ボーダー色

            

fg_color="#353535",

text_color="#EEEEEE",

width=220,

height=30,

command=self.run_login_thread01

            

)      

self.btn_action01.place(x=220, y=125)



self.text_area_csv_content = ctk.CTkTextbox(

#frame_content, width=560, height=150

            

tab2,

#fg_color="white",  # テキストボックスの背景色

text_color="white",

corner_radius=10,  # 角の丸み(任意)

            

width=450,

height=100


)    

  

self.text_area_csv_content.place(x=20, y=200)



# ボタン: recaptcha以後の動作

self.btn_action02 = ctk.CTkButton(


master=tab2,

text="ログイン 02",

            

border_width=1,      # ボーダー幅

border_color="#4578C1", # ボーダー色

            

fg_color="#353535",

text_color="#EEEEEE",            

                     

width=450,  

height=30,

            

command=self.run_task_thread02

            

)

        

self.btn_action02.place( x=20, y=315 )


self.text_area_display = ctk.CTkTextbox(

        

#frame_content, width=560, height=150

            

tab2,

           

#fg_color="white",  # テキストボックスの背景色

            

text_color="white",

corner_radius=10,  # 角の丸み(任意)

            

width=450,

height=50


)

        

self.text_area_report.place( x=20, y=400 )


#

# end of tab02 content



#

# tab03 content

#


# Tab 3 content

self.label_tab03

 = ctk.CTkLabel(tab3, 

    text="Content 3", font=("Arial", 18))

    

self.label_tab03.pack(pady=20)


#

# end of tab03 content



# ボタン1: TXTの読み込み

def load_txt_file( self ):

               

file_path = filedialog.askopenfilename(

        

title="TXTファイルを選択してください", 

filetypes=[("テキストファイル", "*.txt")]

        

)


if file_path:

            

with open(file_path, "r", encoding="utf-8") as file:

                

self.txt_content = file.read()

                

self.text_area_csv_content.delete("1.0", ctk.END)

self.text_area_csv_content.insert(ctk.END, self.txt_content)




def run_login_thread01(self):

        

        #ログインの処理を記述




#

# end of class MyApp



    def run_task_thread02(self):

        

        #

        # 処理内容を記述

        #


    #

    # 


 

#

# end of class MyApp


if __name__ == "__main__":

    

    app = MyApp()

    app.mainloop()



上記のpythonのコードは

タブによって複数の画面を表示できるように

したものですが、


まず、このコードに不備はないでしょうか?


それと、タブの部分は


tab1 = tab_control.add("Tab 1")

tab2 = tab_control.add("Tab 2")

tab3 = tab_control.add("Tab 3")


によって追加されていますが、


デフォルトでは、これらのサイズは幅が小さいのですが、

幅を広くすることは可能なのでしょうか?


        ↓


コード全体を確認したところ、

いくつかの修正と注意点が必要です。

また、タブの幅を広げる方法についても説明します。


---


### 問題点と修正提案


1. **`app`の未定義エラー**


   - `self.tab_control

    = ctk.CTkTabview(app, width=500, height=550)` 

    

    の箇所で `app` が未定義です。

    このコード内では `self` を使用する必要があります。


   - 修正:

     ```python

     

     self.tab_control

     = ctk.CTkTabview(self, width=500, height=550)


     ```


2. **タブの追加に使用している変数のミス**


   - `tab1`, `tab2`, `tab3` は

   `self.tab_control.add` によって追加されていますが、

   正しくは `self.tab_control` を使うべきです。


   - 修正例:

       

     ```python

     tab1 = self.tab_control.add("Tab 1")

     tab2 = self.tab_control.add("Tab 2")

     tab3 = self.tab_control.add("Tab 3")

     ```


3. **`self.text_area_report` の未定義**


   - `self.text_area_report.place(x=20, y=400)`

    の箇所で、

    `text_area_report` が定義されていません。

    

    このコードでは正しく処理されないため、該当箇所を確認する必要があります。


   - 修正:

     ```python

     self.text_area_report = ctk.CTkTextbox(

         tab2,

         text_color="white",

         corner_radius=10,

         width=450,

         height=50

     )

     self.text_area_report.place(x=20, y=400)

     ```


4. **スレッド使用時のUIアクセス**


   - スレッドからUI要素に直接アクセスすると

   不具合が発生する可能性があります。

   スレッド内でUIの更新を行う場合は、

   `tkinter` の `after()` メソッドを利用してください。


---


### タブの幅を広げる方法

`CTkTabview` でタブの幅を広げるには、

`tabview.tab_position` に関するオプションを設定できます。また、タブのサイズをカスタマイズするために、直接タブごとのスタイルを設定する方法もあります。


#### 例: タブの幅を広げるコード

```python

self.tab_control._segmented_button._buttons_dict["Tab 1"].configure(width=150)

self.tab_control._segmented_button._buttons_dict["Tab 2"].configure(width=150)

self.tab_control._segmented_button._buttons_dict["Tab 3"].configure(width=150)

```


---


### 修正後のコードスニペット


以下に修正点を反映させた一部のコード例を示します。


```python

self.tab_control = ctk.CTkTabview(self, width=500, height=550)

self.tab_control.pack(pady=10, padx=10, fill="both", expand=True)


tab1 = self.tab_control.add("Tab 1")

tab2 = self.tab_control.add("Tab 2")

tab3 = self.tab_control.add("Tab 3")


# タブ幅を広げる設定

self.tab_control._segmented_button._buttons_dict["Tab 1"].configure(width=150)

self.tab_control._segmented_button._buttons_dict["Tab 2"].configure(width=150)

self.tab_control._segmented_button._buttons_dict["Tab 3"].configure(width=150)


# Content for Tab 1

self.label = ctk.CTkLabel(tab1, text="Pokemon Center Tool", font=("Arial", 14))

self.label.place(x=180, y=10)

```


---


### 注意点

1. **動作確認**

   - アプリケーションの各機能(スレッド、ファイル読み込みなど)が正しく動作することを確認してください。

2. **レイアウト調整**

   - タブの配置やUI要素の配置が画面サイズに応じて適切になるように調整が必要です。


必要であれば、さらに具体的な部分の修正やアドバイスもお手伝いできます!


コメント