Semantics
Examples#
Basic Example#
import flet as ft
def main(page: ft.Page):
def handle_gain_accessibility_focus(e: ft.Event[ft.Semantics]):
print("focus gained")
def handle_lose_accessibility_focus(e: ft.Event[ft.Semantics]):
print("focus lost")
page.add(
ft.Column(
controls=[
ft.Semantics(
label="Input your occupation",
on_did_gain_accessibility_focus=handle_gain_accessibility_focus,
on_did_lose_accessibility_focus=handle_lose_accessibility_focus,
content=ft.TextField(
label="Occupation",
hint_text="Use 20 words or less",
value="What is your occupation?",
),
),
ft.Icon(name="settings", color="#c1c1c1"),
]
)
)
ft.run(main)
Bases: Control
Provides semantic annotations for the control tree, describing the meaning and purpose of controls.
These annotations are utilized by accessibility tools, search engines, and semantic analysis software to better understand the structure and functionality of the application.
checked: bool | None = None
Whether this subtree represents a checkbox or similar widget with a "checked" state, and what its current state is.
col: ResponsiveNumber = 12
If a parent of this control is a ResponsiveRow,
this property is used to determine
how many virtual columns of a screen this control will span.
Can be a number or a dictionary configured to have a different value for specific
breakpoints, for example col={"sm": 6}.
This control spans the 12 virtual columns by default.
Dimensions
| Breakpoint | Dimension |
|---|---|
| xs | <576px |
| sm | ≥576px |
| md | ≥768px |
| lg | ≥992px |
| xl | ≥1200px |
| xxl | ≥1400px |
current_value_length: int | None = None
The current number of characters that have been entered into an editable text field.
decreased_value: str | None = None
The value that the semantics node represents when it is decreased.
disabled: bool = False
Every control has disabled property which is False by default - control and all
its children are enabled.
Note
The value of this property will be propagated down to all children controls recursively.
expand_loose: bool = False
Allows the control to expand along the main axis if space is available, but does not require it to fill all available space.
More information here.
expanded: bool | None = None
Whether this subtree represents something that can be in an "expanded" or "collapsed" state.
hint_text: str | None = None
A brief textual description of the result of an action performed on the content
control.
increased_value: str | None = None
The value that the semantics node represents when it is increased.
live_region: bool | None = None
Whether this subtree should be considered a live region.
max_value_length: Number | None = None
The maximum number of characters that can be entered into an editable text field.
mixed: bool | None = None
Whether this subtree represents a checkbox or similar control with a "half-checked" state or similar, and whether it is currently in this half-checked state.
multiline: bool | None = None
Whether the value is coming from a field that supports multiline text editing.
on_copy: ControlEventHandler[Semantics] | None = None
Called when the current selection is copied to the clipboard.
on_cut: ControlEventHandler[Semantics] | None = None
Called when the current selection is cut to the clipboard.
on_decrease: ControlEventHandler[Semantics] | None = None
Called when the value represented by the semantics node is decreased.
on_did_gain_accessibility_focus: (
ControlEventHandler[Semantics] | None
) = None
Called when the node has gained accessibility focus.
on_did_lose_accessibility_focus: (
ControlEventHandler[Semantics] | None
) = None
Called when the node has lost accessibility focus.
on_dismiss: ControlEventHandler[Semantics] | None = None
Called when the node is dismissed.
on_increase: ControlEventHandler[Semantics] | None = None
Called when the value represented by the semantics node is increased.
on_long_press: ControlEventHandler[Semantics] | None = None
Called when the node is long-pressed (pressing and holding the screen with the finger for a few seconds without moving it).
on_move_cursor_backward_by_character: (
ControlEventHandler[Semantics] | None
) = None
Called when the cursor is moved backward by one character.
on_move_cursor_forward_by_character: (
ControlEventHandler[Semantics] | None
) = None
Called when the cursor is moved forward by one character.
on_paste: ControlEventHandler[Semantics] | None = None
Called when the current content of the clipboard is pasted.
on_scroll_down: ControlEventHandler[Semantics] | None = None
Called when a user moves their finger across the screen from top to bottom.
on_scroll_left: ControlEventHandler[Semantics] | None = None
Called when a user moves their finger across the screen from right to left.
on_scroll_right: ControlEventHandler[Semantics] | None = (
None
)
Called when a user moves their finger across the screen from left to right.
on_scroll_up: ControlEventHandler[Semantics] | None = None
Called when a user moves their finger across the screen from bottom to top.
on_set_text: ControlEventHandler[Semantics] | None = None
Called when a user wants to replace the current text in the text field with a new text.
Voice access users can trigger this handler by speaking type <text> to their
Android devices.
opacity: Number = 1.0
Defines the transparency of the control.
Value ranges from 0.0 (completely transparent) to 1.0 (completely opaque
without any transparency).
The page (of type Page or PageView) to which this control belongs to.
parent: BaseControl | None
The direct ancestor(parent) of this control.
It defaults to None and will only have a value when this control is mounted (added to the page tree).
The Page control (which is the root of the tree) is an exception - it always has parent=None.
selected: bool | None = None
Whether this subtree represents something that can be in a selected or unselected state, and what its current state is.
toggled: bool | None = None
Whether this subtree represents a toggle switch or similar widget with an "on" state, and what its current state is.
visible: bool = True
Every control has visible property which is True by default - control is
rendered on the page. Setting visible to False completely prevents control (and
all its children if any) from rendering on a page canvas. Hidden controls cannot be
focused or selected with a keyboard or mouse and they do not emit any events.