CupertinoAppBar | Flet中文文档

CupertinoAppBar 继承自： Control, BaseControl

iOS 风格的应用栏（App Bar）。

注意： title 的对齐方式取决于此应用栏是否为 large。如果为 True，title 左对齐；如果为 False（默认），title 居中。

示例

python

import flet as ft


def main(page: ft.Page):
    page.theme_mode = ft.ThemeMode.LIGHT

    page.appbar = ft.CupertinoAppBar(
        leading=ft.Icon(ft.Icons.PALETTE, color=ft.Colors.ON_SECONDARY),
        title=ft.Text("CupertinoAppBar Example"),
        trailing=ft.Icon(ft.Icons.WB_SUNNY_OUTLINED, color=ft.Colors.ON_SECONDARY),
        automatic_background_visibility=False,
        bgcolor=ft.Colors.SECONDARY,
        brightness=ft.Brightness.LIGHT,
    )

    page.add(
        ft.SafeArea(
            content=ft.Text("Body!"),
        )
    )


if __name__ == "__main__":
    ft.run(main)

python

import flet as ft


def main(page: ft.Page):
    page.theme_mode = ft.ThemeMode.LIGHT

    def handle_theme_mode_toggle(_: ft.Event[ft.IconButton]):
        page.theme_mode = (
            ft.ThemeMode.DARK
            if page.theme_mode == ft.ThemeMode.LIGHT
            else ft.ThemeMode.LIGHT
        )
        theme_mode_button.icon = (
            ft.Icons.WB_SUNNY_OUTLINED
            if page.theme_mode == ft.ThemeMode.LIGHT
            else ft.Icons.WB_SUNNY
        )

    theme_mode_button = ft.IconButton(
        icon=(
            ft.Icons.WB_SUNNY_OUTLINED
            if page.theme_mode == ft.ThemeMode.LIGHT
            else ft.Icons.WB_SUNNY
        ),
        icon_color=ft.Colors.ON_INVERSE_SURFACE,
        on_click=handle_theme_mode_toggle,
    )

    page.appbar = ft.CupertinoAppBar(
        automatic_background_visibility=False,
        leading=ft.Icon(ft.Icons.PALETTE, color=ft.Colors.ON_INVERSE_SURFACE),
        bgcolor=ft.Colors.INVERSE_SURFACE,
        trailing=theme_mode_button,
        title=ft.Text("CupertinoAppBar Example", color=ft.Colors.ON_INVERSE_SURFACE),
    )

    page.add(
        ft.SafeArea(
            content=ft.Text("Body!"),
        )
    )


if __name__ == "__main__":
    ft.run(main)

属性

名称	类型	默认值	说明
`leading`	`Optional[Control]`	`None`	A control to display at the start of this app bar. Typically the leading control is an `Icon` or an `IconButton` . If it is `None` and `automatically_imply_leading` is `True`, an appropriate button will be automatically created.
`title`	`Optional[StrOrControl]`	`None`	A string or a control to display in the middle of this app bar. Typically a `Text`.
`trailing`	`Optional[Control]`	`None`	A Control to place at the end of the app bar. Typically used for actions such as searching or editing.
`bgcolor`	`Optional[ColorValue]`	`None`	The fill color to use for this app bar. Default color is defined by current theme.
`automatically_imply_leading`	`bool`	`True`	Whether we should try to imply the `leading` control if `None`. - If `True` and `leading` is `None`, the app bar will automatically determine an appropriate leading control. - If `False` and `leading` is `None`, the space is allocated to the `title`. - If a `leading` control is provided, this parameter has no effect.
`automatically_imply_title`	`bool`	`True`	Whether we should try to imply the `title` control if `None`. - If True and `title` is `None`, a `Text` control containing the current route's title will be automatically filled in. - If the `title` is not `None`, this parameter has no effect.
`border`	`Optional[Border]`	`None`	The border of the app bar. By default, a single pixel bottom border side is rendered.
`padding`	`Optional[PaddingValue]`	`None`	Defines the padding for the contents of the app bar. If `None`, the app bar will adopt the following defaults: - vertically, contents will be sized to the same height as the app bar itself minus the status bar. - horizontally, padding will be `16` pixels according to iOS specifications unless the leading widget is an automatically inserted back button, in which case the padding will be `0`. Note: Vertical padding (`top` and `bottom`) won't change the height of this app bar.
`transition_between_routes`	`bool`	`True`	Determines whether the app bar transitions between routes. If `True`, this app bar will animate on top of route transitions when the destination route also contains a `CupertinoAppBar` or `CupertinoSliverAppBar` with `transition_between_routes` set to `True`. This transition also occurs during edge back swipe gestures, mimicking native iOS behavior. Note: When enabled, only one app bar can be present per route unless a `hero_tag` is specified.
`previous_page_title`	`Optional[str]`	`None`	Manually specify the previous route's title when automatically implying the leading back button. Overrides the text shown with the back chevron instead of automatically showing the previous route's title when `automatically_imply_leading` is `True`. Note: Has no effect if `leading` is not `None` or if `automatically_imply_leading` is `False`.
`brightness`	`Optional[Brightness]`	`None`	The brightness of the specified `bgcolor`. Setting this value changes the style of the system status bar. It is typically used to increase the contrast ratio of the system status bar over `bgcolor`. If `None` (the default), its value will be inferred from the relative luminance of the `bgcolor`.
`automatic_background_visibility`	`bool`	`True`	Whether the navigation bar should appear transparent when content is scrolled under it. If `False`, the navigation bar will display its `bgcolor`.
`enable_background_filter_blur`	`Optional[bool]`	`None`	Whether to have a blur effect when a non-opaque `bgcolor` is used. This will only be respected when `automatic_background_visibility` is `False` or until content scrolls under the navigation bar.
`large`	`bool`	`False`	Whether to use a large app bar layout. If `True`, the `title` is left-aligned; if `False`, the `title` is centered.
`expand`	`Annotated[Optional[Union[bool, int]], V.instance_of((bool, int))]`	`None`	指定此控件是否/如何扩展以填充父布局中的可用空间。详见此处. Note: Has effect only if the direct parent of this control is one of the following controls, or their subclasses: `Column`, `Row`, `View`, `Page`. Raises: ValueError: If it is not of type `bool` or `int`.
`expand_loose`	`bool`	`False`	允许控件在主轴方向上有可用空间时扩展，但不要求填满所有可用空间。详见此处. Note: 若 `expand_loose` 为 `True`，则仅当同时满足以下条件时生效： - `expand` 不为 `None`，且 - the direct parent of this control is one of the following controls, or their subclasses: `Column`, `Row`, `View`, `Page`.
`col`	`ResponsiveNumber`	`12`	若此控件的父控件是 `ResponsiveRow`，此属性用于决定该控件横跨多少个虚拟列。可以是数字，也可以是为不同断点配置不同值的字典，例如 `col={"sm": 6}`。 `0` 表示在该断点下隐藏控件，不占用任何列。默认横跨 12 个虚拟列。 \
`opacity`	`Annotated[Number, V.between(0.0, 1.0)]`	`1.0`	定义控件的透明度，取值范围 `0.0`（完全透明）到 `1.0`（完全不透明）。抛出异常：ValueError：若不在 `0.0` 到 `1.0` 的闭区间内。
`tooltip`	`Optional[TooltipValue]`	`None`	鼠标悬停时显示的 tooltip。
`badge`	`Optional[BadgeValue]`	`None`	显示在控件顶部的徽标。
`visible`	`bool`	`True`	Every control has `visible` property which is `True` by default - control is rendered on the page. Setting `visible` to `False` 完全阻止该控件（及其所有子控件）渲染到页面画布上. 隐藏的控件不能通过键盘或鼠标聚焦或选中，也不会触发任何事件。
`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. Example: For example, if you have a form with multiple entry controls you can disable them all together by disabling container: `python ft.Column( disabled = True, controls=[ ft.TextField(), ft.TextField() ] )`
`rtl`	`bool`	`False`	控件的文字方向是否为从右到左（RTL）。
`data`	`Any`	`skip_`	任意类型的自定义数据。
`key`	`Optional['KeyValue']`	`None`	用于在更新之间保持控件身份稳定的 key。

只读属性

名称	类型	默认值	说明
`parent`	`Optional['BaseControl']`	—	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). `Page` 控件（树的根）为例外 —— 它始终 `parent=None`。
`page`	`'Page'`	—	此控件所属的页面。

方法

名称	类型	默认值	说明
`is_isolated`	—	—	Return whether this control is marked as isolated. 被隔离的控件不会参与父级驱动的更新遍历，需要自行管理更新边界。
`init`	—	—	Called after control instance initialization and before the first build / update cycle. 可重写此钩子执行依赖于已初始化字段的轻量设置。不要在这里调用 `update()`。
`build`	—	—	在控件初始化期间调用一次，用于定义其子控件。 `page` 属性在此方法中可用。
`before_update`	—	—	每次控件即将更新时调用。 Note: 不要在此处调用 `update()`。
`before_event`	—	—	在事件处理器执行前拦截事件。返回 `False` 取消分发，返回 `True` 或 `None` 则继续正常的事件处理。
`did_mount`	—	—	在控件挂载到页面树之后调用。可重写以启动需要已挂载页面的资源，例如订阅、定时器或服务监听。
`will_unmount`	—	—	在控件从页面树移除之前调用。可重写以释放 `did_mount()` 中创建的资源，例如订阅、定时器或外部句柄。
`get_data_channel`	—	—	Resolve the [DataChannel] allocated on the Dart side for this widget. Pattern: on_data_channel_open: Optional[ft.EventHandler[DataChannelOpenEvent]] = None def init(self): self.on_data_channel_open = self._on_open def _on_open(self, e): self._channel = self.get_data_channel(e.channel_id) Idempotent — the underlying Connection caches DataChannels by id, so repeated calls return the same instance. No error path: the id always comes from a framework-fired event, so by the time this runs the channel exists on both sides.
`update`	`None`	—	请求更新该控件的 UI。在修改控件状态或属性后调用。控件必须已挂载到页面，并且未被冻结。

托管

托管

示例 ​

属性 ​

只读属性 ​

方法 ​

关注我，学习大模型、大数据、Python等热门技术。

示例

属性

只读属性

方法