主题
Scrollbar
配置可滚动控件为其内容渲染的滚动条。
示例
python
from typing import Optional
import flet as ft
def main(page: ft.Page):
page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
page.appbar = ft.AppBar(title="Scrollbar Dataclass Showcase")
def get_scrollbar() -> ft.Scrollbar:
def str_as_bool(value: Optional[str]) -> Optional[bool]:
return True if value == "true" else False if value == "false" else None
return ft.Scrollbar(
thumb_visibility=str_as_bool(thumb_visibility.value),
track_visibility=str_as_bool(track_visibility.value),
interactive=str_as_bool(interactive.value),
thickness=thickness_value.value if use_thickness.value else None,
radius=radius_value.value if use_radius.value else None,
orientation=None
if orientation.value == "none"
else ft.ScrollbarOrientation(orientation.value),
)
def get_preview_content(scrollbar: ft.Scrollbar) -> tuple[str, ft.Control]:
selected_orientation = scrollbar.orientation
is_horizontal = selected_orientation in (
ft.ScrollbarOrientation.TOP,
ft.ScrollbarOrientation.BOTTOM,
)
if is_horizontal:
return (
"Horizontal preview (TOP/BOTTOM orientation)",
ft.Row(
spacing=8,
scroll=scrollbar,
controls=[
ft.Container(
width=110,
height=80,
border=ft.Border.all(1, ft.Colors.OUTLINE_VARIANT),
border_radius=8,
bgcolor=ft.Colors.SURFACE_CONTAINER_HIGHEST,
alignment=ft.Alignment.CENTER,
content=ft.Text(f"Tile {i + 1}"),
)
for i in range(18)
],
),
)
return (
"Vertical preview (None/LEFT/RIGHT orientation)",
ft.Column(
spacing=4,
scroll=scrollbar,
controls=[ft.Text(f"Item {i + 1}") for i in range(40)],
),
)
def update_preview():
thickness_value.disabled = not use_thickness.value
radius_value.disabled = not use_radius.value
scrollbar = get_scrollbar()
title, content = get_preview_content(scrollbar)
preview_title.value = title
preview_viewport.content = content
page.update()
page.add(
ft.SafeArea(
content=ft.Column(
controls=[
ft.Text(
"Interactive playground for the Scrollbar dataclass. "
"Change each property and inspect the live result."
),
ft.Row(
wrap=True,
spacing=12,
run_spacing=12,
alignment=ft.MainAxisAlignment.CENTER,
controls=[
ft.Container(
width=360,
padding=12,
border=ft.Border.all(1, ft.Colors.OUTLINE_VARIANT),
border_radius=10,
bgcolor=ft.Colors.SURFACE_CONTAINER_LOW,
content=ft.Column(
spacing=10,
controls=[
ft.Text(
"Configuration", weight=ft.FontWeight.BOLD
),
thumb_visibility := ft.Dropdown(
label="thumb_visibility",
value="none",
on_select=update_preview,
options=[
ft.DropdownOption(
"none", "None (theme default)"
),
ft.DropdownOption("true", "True"),
ft.DropdownOption("false", "False"),
],
),
track_visibility := ft.Dropdown(
label="track_visibility",
value="none",
on_select=update_preview,
options=[
ft.DropdownOption(
"none", "None (theme default)"
),
ft.DropdownOption("true", "True"),
ft.DropdownOption("false", "False"),
],
),
interactive := ft.Dropdown(
label="interactive",
value="none",
on_select=update_preview,
options=[
ft.DropdownOption(
"none", "None (platform default)"
),
ft.DropdownOption("true", "True"),
ft.DropdownOption("false", "False"),
],
),
orientation := ft.Dropdown(
label="orientation",
value="none",
on_select=update_preview,
options=[
ft.DropdownOption(
"none", "None (auto side)"
)
]
+ [
ft.DropdownOption(o.value, o.name)
for o in ft.ScrollbarOrientation
],
),
use_thickness := ft.Checkbox(
label="Set thickness",
value=False,
on_change=update_preview,
),
thickness_value := ft.Slider(
min=0,
max=20,
divisions=20,
value=8,
label="{value}",
on_change=update_preview,
),
use_radius := ft.Checkbox(
label="Set radius",
value=False,
on_change=update_preview,
),
radius_value := ft.Slider(
min=0,
max=20,
divisions=20,
value=8,
label="{value}",
on_change=update_preview,
),
],
),
),
ft.Container(
width=420,
padding=12,
border=ft.Border.all(1, ft.Colors.OUTLINE_VARIANT),
border_radius=10,
bgcolor=ft.Colors.SURFACE_CONTAINER_LOW,
content=ft.Column(
spacing=10,
controls=[
ft.Text(
"Live preview", weight=ft.FontWeight.BOLD
),
preview_title := ft.Text(
weight=ft.FontWeight.BOLD
),
preview_viewport := ft.Container(
height=260,
border=ft.Border.all(1, ft.Colors.OUTLINE),
border_radius=8,
padding=8,
),
],
),
),
],
),
],
),
)
)
update_preview()
if __name__ == "__main__":
ft.run(main)属性
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
thumb_visibility | Optional[bool] | None | 此滚动条的滑块是否应始终可见，即使未被滚动时也是如此。当为 False 时，滚动条会在滚动期间显示，其余时间淡出。如果为 None，则使用 thumb_visibility。如果它也是 None，则默认为 False。 |
track_visibility | Optional[bool] | None | 指示只要 thumb_visibility 可见，滚动条轨道是否应可见。如果为 None，则使用 track_visibility。如果它也是 None，则默认为 False。 |
thickness | Optional[Number] | None | 以逻辑像素为单位控制滚动条的交叉轴尺寸。滚动条在可滚动组件交叉轴上的厚度。如果为 None，默认值取决于平台：在 Android（platform == ANDROID）和 iOS（platform == IOS）上为 4.0 像素；其余平台使用 thickness。 |
radius | Optional[Number] | None | 滚动条滑块圆角矩形角的圆角半径，以逻辑像素为单位。如果为 None，则使用平台默认值。滚动条滑块圆角矩形角的半径。如果为 None，默认值取决于平台：在 Android（platform == ANDROID）上不应用圆角；在 iOS（platform == IOS）上为 1.5 像素；其余平台为 8.0 像素。 |
interactive | Optional[bool] | None | 此滚动条是否应可交互，并响应拖动滑块或在轨道区域点击的操作。当为 False 时，滚动条不会响应手势或悬停事件，并允许点击穿透。如果为 None，默认为 True，但在 Android 上默认为 False。 |
orientation | Optional[ScrollbarOrientation] | None | 指定滚动条相对于可滚动组件应出现的位置。如果为 None，对于垂直滚动，在从左到右的文本方向下默认为 RIGHT，在从右到左的文本方向下默认为 LEFT；而对于水平滚动，默认为 BOTTOM。注意：TOP 和 BOTTOM 只能用于水平滚动；LEFT 和 RIGHT 只能用于垂直滚动。 |
