Flutter Widget 之Actions

在探索Focus和Shortcuts小部件后,我们终于准备很好了解这最后角色 Actions小部件

之前,我们了解到Flutter如何将键盘事件路由到小部件树,从活跃的FocusNode开始,

ezgif.com-gif-maker.gif

直到Shortcuts小部件匹配键盘事件并将其转换为Intent。

ezgif.com-gif-maker (1).gif
通过将Intents与实际功相匹配,Actions小部件关闭此循环,以实现你的用户的期望。

首先,将Actions小部件添加到你的其中一个小部件构建方法,Actions小部件采用名为actions的重要命名参数,这是Intents和actions的映射,

ezgif.com-gif-maker (2).gif

Actions(
    actions: <Type, Action<Intent>>{},
    child: AccordioonSections(),
)

最好单独定义该映射,但是当你命名后,就把它放回你的Actions小部件, 这些Action类是什么样的?

final actionsMap = {
    MyFirstIntent: MyFirstAction(),
    MySecondIntent: MySecondAction(),
};

Actions(
    actions: actionsMap,
    child: AccordionSections(),
)

这是Action的子类并指定其匹配的Intent类,最后,有一个invoke()方法,这接受Flutter与之匹配的特定intent实例,而Flutter会为你调用,至此,你已完成Flutter的键盘快捷键系统的整合

class MyFirstAction extends Action<MyFirstIntent> {
    
    @override
    void invoke(MyFirstIntent intent,) => doSomething();
}

用户在实体键盘上键入按键,按键事件会向上传播小部件树,直到Shortcuts小部件将其转换为Intent,Intent则返回到活跃FocusNode,然后再向上传播到树,直到Actions小部件将其转换为Action,然后Flutter调用哪个Action的invoke()方法,来达到实际效果。

ezgif.com-gif-maker (3).gif

最后,你的桌面和Web用户感到很高兴,而Flutter的Focus系统则传递消息而不需要大量UI小部件与特定键盘快捷键的知识结合起来。

如果想了解有关Actions的内容,或者关于Flutter的其他功能,请访问flutter.dev

原文翻译自视频:视频地址

© 版权声明
THE END
喜欢就支持一下吧
点赞8 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容