C#ATIA

↑タイトル詐欺 主にFusion360API 偶にCATIA V5 VBA(絶賛ネタ切れ中)

スクロールバーを使いたい1

コンテンツが多い場合、スクロールバーを利用出来るようにしたい
のですサンプル探した所、公式のものが有りました。
examples/column-scroll.py at main · flet-dev/examples · GitHub
https://www.youtube.com/watch?v=ooDiZAiIVUo

何でこんなに清楚に書けるんだよ、凹むわ。


この例だと左右に分割して表示させ、左のみのスクロールバーを制御して
いますが、予定としては複数に分割してそれぞれにスクロールバーが付き
それぞれでスクロールするものにする予定です。

サンプルイジリました。

import flet as ft

def main(page: ft.Page):
    def add_text_box(_):
        text_field = ft.TextField(
            label=f"Text Box {len(left_column.controls)}",
            label_style=ft.TextStyle(color=ft.colors.GREEN),
            color=ft.colors.GREEN,
            value=str(len(left_column.controls)),
        )
        left_column.controls.append(text_field)
        center_column.controls.append(text_field)
        page.update()

    def remove_text_box(_):
        if left_column.controls:
            left_column.controls.pop()
            center_column.controls.pop()
        page.update()

    def scroll_generator(scroll_mode_list):
        while True:
            for scroll_mode in scroll_mode_list:
                yield scroll_mode

    def change_scroll(_):
        left_column.scroll = center_column.scroll = next(scroll_mode)
        scroll_mode_text.value = str(left_column.scroll)
        page.update()

    add_text_box_button = ft.ElevatedButton("Add TextBox", on_click=add_text_box)
    remove_text_box_button = ft.ElevatedButton(
        "Remove TextBox", on_click=remove_text_box
    )
    scroll_change_button = ft.ElevatedButton(
        "Change Scroll Mode", on_click=change_scroll
    )

    scroll_mode = scroll_generator(
        [
            None,
            ft.ScrollMode.AUTO,
            ft.ScrollMode.ADAPTIVE,
            ft.ScrollMode.ALWAYS,
            ft.ScrollMode.HIDDEN,
        ]
    )

    left_column = ft.Column(
        [ft.Text("THIS IS COL 1", color=ft.colors.RED_400)],
        scroll=next(scroll_mode),
    )
    left_container = ft.Container(
        left_column,
        expand=True,
        margin=10,
        padding=10,
        bgcolor=ft.colors.AMBER_100,
        border_radius=10,
        alignment=ft.alignment.top_center,
    )

    center_column = ft.Column(
        [ft.Text("THIS IS COL 2", color=ft.colors.RED_400)],
        scroll=next(scroll_mode),
    )
    center_container = ft.Container(
        center_column,
        expand=True,
        margin=10,
        padding=10,
        bgcolor=ft.colors.AMBER_400,
        border_radius=10,
        alignment=ft.alignment.top_center,
    )

    scroll_mode_text = ft.Text(str(left_column.scroll))
    right_container = ft.Container(
        ft.Column(
            [
                add_text_box_button,
                remove_text_box_button,
                scroll_change_button,
                scroll_mode_text,
            ],
        ),
        margin=10,
        padding=10,
        bgcolor=ft.colors.CYAN_500,
        border_radius=10,
        expand=True,
        alignment=ft.alignment.top_center,
    )

    row = ft.Row([left_container, center_container, right_container], expand=True)
    page.add(row)


ft.app(target=main)

それぞれが単独でスクロール出来ました。
ListViewとはおさらばかな?(大幅にやり直し)