跳到主要内容

动画开关 AnimatedSwitcher

一个控件，默认情况下在 content 上设置的新控件和上一个设置的控件之间做一个交叉淡入淡出效果。

示例​

Live example

使用缩放效果在两个容器之间进行动画切换​

import flet as ft

def main(page: ft.Page):

    c1 = ft.Container(
        ft.Text("Hello!", style=ft.TextThemeStyle.HEADLINE_MEDIUM),
        alignment=ft.alignment.center,
        width=200,
        height=200,
        bgcolor=ft.colors.GREEN,
    )
    c2 = ft.Container(
        ft.Text("Bye!", size=50),
        alignment=ft.alignment.center,
        width=200,
        height=200,
        bgcolor=ft.colors.YELLOW,
    )
    c = ft.AnimatedSwitcher(
        c1,
        transition=ft.AnimatedSwitcherTransition.SCALE,
        duration=500,
        reverse_duration=100,
        switch_in_curve=ft.AnimationCurve.BOUNCE_OUT,
        switch_out_curve=ft.AnimationCurve.BOUNCE_IN,
    )

    def animate(e):
        c.content = c2 if c.content == c1 else c1
        c.update()

    page.add(
        c,
        ft.ElevatedButton("Animate!", on_click=animate),
    )

ft.app(target=main)

属性​

duration​

从旧的 content 值过渡到新的 content 值的持续时间（以毫秒为单位）。默认值为 1000 毫秒。

reverse_duration​

从新的 content 值过渡到旧的 content 值的持续时间（以毫秒为单位）。默认值为 1000 毫秒。

switch_in_curve​

在过渡到新的 content 时使用的动画曲线。参见 Flutter 文档中的 Curves 部分以获取可能的值。属性值是 AnimationCurve 枚举类型，默认值为 AnimationCurve.LINEAR。

switch_out_curve​

在将前一个 content 过渡出去时使用的动画曲线。参见 Flutter 文档中的 Curves 部分以获取可能的值。属性值是 AnimationCurve 枚举类型，默认值为 AnimationCurve.LINEAR。

transition​

用于在新旧 content 之间进行过渡的动画类型。属性值是 AnimatedSwitcherTransition 枚举类型，默认值为 AnimatedSwitcherTransition.FADE。