Contents
fletとは
PythonでモダンなGUIツールを作成できるライブラリであるfletの導入方法や基本的な使い方は以前の記事に記載しています
https://note.com/python_lab/n/n92364dcd66b3
実際のアプリケーション例
以下のコードは、Fletフレームワークを使用して、画像のスライドショーを作成するアプリケーションです。ユーザーは「次の画像」ボタンと「前の画像」ボタンを使用して画像を切り替えることができます。
import flet as ft
def main(page: ft.Page):
# ウィンドウのサイズを設定
page.window_width = 400 # 幅を指定
page.window_height = 300 # 高さを指定
# 画像のURLリスト
images = [
"https://tkstock.site/wp-content/uploads/2023/09/unnamed.png",
"https://tkstock.site/wp-content/uploads/2023/09/png-transparent-instragram-logo.png",
"https://tkstock.site/wp-content/uploads/2023/06/bootstrap-social.png"
]
current_image_index = [0] # 現在の画像のインデックスを格納するリスト
# 画像を表示するImageウィジェット
image = ft.Image(src=images[current_image_index[0]], width=300, height=200)
page.add(image)
# 次の画像に移動するボタン
def next_image(e):
if current_image_index[0] < len(images) - 1:
current_image_index[0] += 1
else:
current_image_index[0] = 0 # 最後の画像の後は最初に戻る
image.src = images[current_image_index[0]]
page.update()
# 前の画像に移動するボタン
def prev_image(e):
if current_image_index[0] > 0:
current_image_index[0] -= 1
else:
current_image_index[0] = len(images) - 1 # 最初の画像の前は最後の画像に移動
image.src = images[current_image_index[0]]
page.update()
next_button = ft.ElevatedButton(text="次の画像", on_click=next_image)
prev_button = ft.ElevatedButton(text="前の画像", on_click=prev_image)
# ボタンを横並びに配置するためのRowウィジェット
button_row = ft.Row([prev_button, next_button])
page.add(button_row)
page.update()
# アプリケーションを実行
ft.app(target=main)
<実行結果>
<コード解説>
このコードは、Fletフレームワークを使って画像スライドショーアプリを作成しています。ボタンをクリックすることで画像を順番に表示する機能があります。コードの各部分について詳しく解説します。
1. ライブラリのインポートと基本設定
import flet as ft
def main(page: ft.Page):
# ウィンドウのサイズを設定
page.window_width = 400 # 幅を指定
page.window_height = 300 # 高さを指定-
`flet`ライブラリをインポートしています。
-
`main`関数は、アプリケーションのエントリーポイントで、ページ（ウィンドウ）の設定を行います。
-
`page.window_width`と`page.window_height`でウィンドウのサイズを設定しています。
2. 画像のURLリストとインデックスの初期化
# 画像のURLリスト
images = [
"https://tkstock.site/wp-content/uploads/2023/09/unnamed.png",
"https://tkstock.site/wp-content/uploads/2023/09/png-transparent-instragram-logo.png",
"https://tkstock.site/wp-content/uploads/2023/06/bootstrap-social.png"
]
current_image_index = [0] # 現在の画像のインデックスを格納するリスト-
表示する画像のURLをリストで定義しています。
-
`current_image_index`は、現在表示している画像のインデックスを管理するためのリストで、初期値は0（最初の画像）です。
3. 画像表示用のウィジェットの作成
# 画像を表示するImageウィジェット
image = ft.Image(src=images[current_image_index[0]], width=300, height=200)
page.add(image)-
`Image`ウィジェットを使って画像を表示します。
-
`src`属性には、現在の画像のURLを指定しています。
-
`width`と`height`属性で画像のサイズを設定しています。
-
`page.add(image)`で画像ウィジェットをページに追加します。
4. 次の画像に移動するボタンとその処理
# 次の画像に移動するボタン
def next_image(e):
if current_image_index[0] < len(images) - 1:
current_image_index[0] += 1
else:
current_image_index[0] = 0 # 最後の画像の後は最初に戻る
image.src = images[current_image_index[0]]
page.update()-
`next_image`関数は、次の画像に移動するボタンのクリックイベントを処理します。
-
現在の画像インデックスを1増やし、最後の画像に到達したら最初の画像に戻ります。
-
`image.src`を更新して、表示する画像を変更します。
-
`page.update()`でページの更新を行います。
5. 前の画像に移動するボタンとその処理
# 前の画像に移動するボタン
def prev_image(e):
if current_image_index[0] > 0:
current_image_index[0] -= 1
else:
current_image_index[0] = len(images) - 1 # 最初の画像の前は最後の画像に移動
image.src = images[current_image_index[0]]
page.update()-
`prev_image`関数は、前の画像に移動するボタンのクリックイベントを処理します。
-
現在の画像インデックスを1減らし、最初の画像の前に戻ると最後の画像に移動します。
-
`image.src`を更新して、表示する画像を変更します。
-
`page.update()`でページの更新を行います。
6. ボタンの作成と配置
next_button = ft.ElevatedButton(text="次の画像", on_click=next_image)
prev_button = ft.ElevatedButton(text="前の画像", on_click=prev_image)
# ボタンを横並びに配置するためのRowウィジェット
button_row = ft.Row([prev_button, next_button])
page.add(button_row)
page.update()-
`ElevatedButton`ウィジェットを使って、「次の画像」と「前の画像」ボタンを作成します。それぞれのボタンにクリックイベントハンドラを設定します。
-
`Row`ウィジェットを使って、ボタンを横並びに配置します。
-
`page.add(button_row)`でボタンをページに追加します。
-
`page.update()`でページの更新を行います。
7. アプリケーションの実行
# アプリケーションを実行
ft.app(target=main)-
`ft.app(target=main)`でアプリケーションを実行し、`main`関数をエントリーポイントとして指定します。
これで、ボタンをクリックすることで画像が切り替わるシンプルな画像スライドショーアプリが完成します。
コメント