Flutter Widget 之FocusableActionDetector使用详解

目录
  • Material按钮
  • GestureDetector自定义按钮
    • 为按钮添加一些条件性的样式

Material按钮

Material按钮会很好

但我们知道它们不一定适合你的应用程序，所以你要自己编写。可悲的是，从头开始编写自己的空间可能是一项艰巨的工作。

桌面用户期待悬停高亮、焦点和键盘快捷键，这是很难做好的。

GestureDetector自定义按钮

是这样的,你在你的应用程序中创建一个自定义的按钮, 使用GestureDetector，当你点击它的时候，按钮会做一些事情

GestureDetector(
    onTap: showDash,
    child: Container(
        child: ColoredBox(
            child: Text("Click me!"),
        ),
    ),
)

你添加适当的变量和函数来存储和操作状态，如onHovered和onFocus

bool _onHovered = false;
bool _onFocus = false;
onHover() {
    _onHovered = !_onHovered;
}
onFocus(bool focused) {
    _onFocus = focused;
}

为按钮添加一些条件性的样式

GestureDetector(
    onTap: showDash,
    child: Container(
        decoration: _onFocus ? Red Border : Blue Border,
        child: ColoredBox(
            color: _onHovered ? BlueGrey : Blue,
            child: Text("Click me!"),
        )
    )
)

给按钮一个鼠标区域,包入一个Focus部件,然后是一个Action部件，最后是一个Shortcuts部件，更不用输欧四个部件中的三个嵌套顺序了

GestureDetector(
    onTap: showDash,
    child: Shortcuts(
        shortcuts: {MAP OF SHORTCUTS},
        child: Actions(
            actions: {MAP OF ACTIONS AND INTENTS},
            child: Focuus(
                onFocusChange: (bool focused) => onFocus(focused),
                child: MouseRegion(
                    onEnter: (PointerEnterEvent event) => onHover(),
                    onExit: (PointerExitEvent event) => onHover(),
                    chihld: <Button>
                ),
            ),
        ),
    ),
)

所以如果你不小心把Focus放在上面，就会毫无作用,太麻烦了

你的build方法变得很难操作了，它现在至少有四个部件还不包括GestureDetector.

所以你在写这些模版之前，请看看FocusableActionDetector,它将Actions、Shortcuts、Foocus和MouseRegion的所有功能结合在一个小部件中，与其嵌套所有四个部件，不如完全用FocusableActionDetector来代替。

给FocusableActionDetector提供与你传递给前几个小部件相同的信息：Shortcut的Map，action的Map，焦点的回调以及最后悬停变化的回调

GestureDetector(
    onTap: showDash,
    child: FocusableActionDetector(
        onShowHoverHighlight: onHover,
        onShowFocusHighlight: onFocus,
        actions: {MAP OF ACTIONS},
        shortcuts: {MAP OF SHORTCUTS},
        child: <Button>
    )
)

就这样，一个具有悬停效果和键盘快捷键的可聚焦按钮，所有你想要的功能，而不需要确保你以正确的顺序手动潜逃四个不同的小部件

如果想了解有关FocusableActionDetector的内容，或者关于Flutter的其他功能，请访问pub.dev

以上就是Flutter Widget 之FocusableActionDetector使用详解的详细内容，更多关于Flutter Widget FocusableActionDetector的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Flutter Widget 之StatefulBuilder构建方法详解

    Flutter Widget 之StatefulBuilder构建方法详解

    目录 正文 性能问题解决 正文 你曾否意识到你需要拆分一个大型的构建方法,但又觉得这听起来很费劲? 试试StatefulBuilder 以最小的代价获得一个个单独的小部件的所有性能 想象一下,这样的一个小部件,有一个可以切换单一标志的便宜的子部件,然后是一个昂贵的小部件. 除非绝对必要,否则你不会想要重建它 bool isExpanded = false; Widget build(context) { return Column( children: [ InexpendsiveStatefu

  • flutter InheritedWidget使用方法总结

    目录 引言 didChangeDependencies 如何使用? 结论 引言 InheritedWidget,flutter中非常重要的一个功能组件.比如我们在应用的根 widget 中通过InheritedWidget共享了一个数据,那么我们便可以在任意子 widget 中来获取该共享的数据. didChangeDependencies 说到 InheritedWidget ,我们不得不聊聊 state 对象中的 didChangeDependencies 方法.当子控件依赖使用了父控件中的

  • Flutter Widgets MediaQuery控件屏幕信息适配

    Flutter Widgets MediaQuery控件屏幕信息适配

    目录 MediaQuery MediaQueryData 使用场景 根据尺寸构建不同的布局 系统字体变化 第三方屏幕的适配框架: 设置字体不随系统字体大小进行改变 APP全局 总结: MediaQuery 通常情况下,不会直接将MediaQuery当作一个控件,而是使用MediaQuery.of获取当前设备的信息,用法如下: var data = MediaQuery.of(context); 此方式必须放在MediaQuery作用域内,否则会抛出异常,MaterialApp和WidgetsAp

  • Flutter开发Widgets 之 PageView使用示例

    Flutter开发Widgets 之 PageView使用示例

    目录 构造方法以及参数: 基本用法 无限滚动 实现指示器 切换动画 总结: 构造方法以及参数: PageView可用于Widget的整屏滑动切换,如当代常用的短视频APP中的上下滑动切换的功能,也可用于横向页面的切换,如APP第一次安装时的引导页面,也可用于开发轮播图功能. PageView({ Key? key, this.scrollDirection = Axis.horizontal, // 设置滚动方向 垂直 / 水平 this.reverse = false, // 反向滚动 Pag

  • Flutter Widget之FutureBuilder使用示例详解

    Flutter Widget之FutureBuilder使用示例详解

    目录 正文 正文 本质上Flutter和Dart是异步的,Dart是Futures使你能够管理IO而不用担心线程或死锁. 例如,从应用程序外部加载数据需要时间,而Futures允许Dart先处理其他任务直到请求的数据可用. 但是涉及Future时,你如何构建Flutter小部件呢? 输入FutureBuilder,这是处理Futures的构造器 FutureBuilder( future: _data, builder: _myBuilderFunction, ) FutureBuilder让你

  • Flutter Widgets之标签类控件Chip详解

    Flutter Widgets之标签类控件Chip详解

    目录 概述: RawChip Chip InputChip ChoiceChip FilterChip 总结: 概述: Flutter 标签类控件大全ChipFlutter内置了多个标签类控件,但本质上它们都是同一个控件,只不过是属性参数不同而已,在学习的过程中可以将其放在放在一起学习,方便记忆. RawChip Material风格标签控件,此控件是其他标签控件的基类,通常情况下,不会直接创建此控件,而是使用如下控件: Chip InputChip ChoiceChip FilterChip

  • Flutter Widget 之package mason实现详解

    Flutter Widget 之package mason实现详解

    目录 正文 使用Mason砖块 运行mason make 正文 Flutter有个悠久的传统,便是运行flutter create并删除所有内容,然后在所有标准样板文件(boilerplate)当中尽力复制和粘贴,这很费时又容易出错,而且比报税更无趣,但是是否别无他法? 进入Mason,这是用于欧快速组装新项目或功能的软件包,可以从成为“砖块”的自定义模版中生成代码,而这些模版根据你的项目的特定值呈现 使用Mason砖块 例如想象一下,你正为Flutter新项目使用Mason砖块的pubspec

  • Flutter Widgets粘合剂CustomScrollView NestedScrollView滚动控件

    目录 概述: CustomScrollView 相互嵌套场景 NestedScrollView 滚动隐藏AppBar SliverAppBar展开折叠 与TabBar配合使用 总结: 概述: Flutter中常用的滑动布局 ScrollView 有 SingleChildScrollView.NestedScrollView.CustomScrollView. SingleChildScrollView 用来处理简单可滑动的页面布局视图,如一般的数据详情页面,当内容足够多时,一屏显示不下时,就需

  • Flutter Widget 之FocusableActionDetector使用详解

    Flutter Widget 之FocusableActionDetector使用详解

    目录 Material按钮 GestureDetector自定义按钮 为按钮添加一些条件性的样式 Material按钮 Material按钮会很好 但我们知道它们不一定适合你的应用程序,所以你要自己编写.可悲的是,从头开始编写自己的空间可能是一项艰巨的工作. 桌面用户期待悬停高亮.焦点和键盘快捷键,这是很难做好的. GestureDetector自定义按钮 是这样的,你在你的应用程序中创建一个自定义的按钮, 使用GestureDetector,当你点击它的时候,按钮会做一些事情 GestureD

  • Flutter Widget之NavigationBar使用详解

    目录 正文 background 正文 这是一个和时间一样古老的故事.您的应用程序有三到五个主要内容区域,您的用户应该能够在任何屏幕之间切换. 那么,在这种情况下,请查看NavigationBar. 现在,您可能会想,“底部们有导航栏吗?,这个新的导航栏小部件有什么特别之处?“ 不同之处在于BoottomNavigationBar使用Material 2设计系统,而NavigationBar具有新的Material 3外观和感觉. 例如,药丸形状,它以对比色指示活动的目的地. 要启动并运行,为N

  • Flutter Http网络请求实现详解

    Flutter Http网络请求实现详解

    Http网络请求是一门开发语言里比较常用和重要的功能,主要用于资源访问.接口数据请求和提交.上传下载文件等等操作,Http请求方式主要有:GET.POST.HEAD.PUT.DELETE.TRACE.CONNECT.OPTIONS.本文主要GET和POST这两种常用请求在Flutter中的用法,其中对POST将进行着重讲解.Flutter的Http网络请求的实现主要分为三种:io.dart里的HttpClient实现.Dart原生http请求库实现.第三方库实现.后面将会给大家详细讲解这几种区别

  • Flutter悬浮按钮FloatingActionButton使用详解

    目录 1.普通用法 2.修改悬浮按钮位置 3.修改悬浮按钮大小 4.去除悬浮按钮切换动画 5.一般的自定义悬浮按钮样式 6.彻底的自定义悬浮按钮样式 1.普通用法 floatingActionButton: FloatingActionButton( child: Icon(Icons.add), onPressed: (){ print('不要啊~'); }, ), 2.修改悬浮按钮位置 继承FloatingActionButtonLocation类,重写对应方法自定义位置 import 'p

  • Android Flutter自适应瀑布流案例详解

    Android Flutter自适应瀑布流案例详解

    目录 Flutter自适应瀑布流 根据效果图可以分为四步: 1.图片自适应: 2.自适应标签: 3.上拉刷新和下拉加载 4.底部的点赞按钮 Flutter自适应瀑布流 前言:在电商app经常会看到首页商品推荐的瀑布流,或者类似短视频app首页也是瀑布流,这些都是需要自适应的,才能给用户带来好的体验 (具体代码请联系我,当天会回复) 话不多说先上效果图: 根据效果图可以分为四步: 图片自适应 自适应标签 上拉刷新和下拉加载 底部的点赞按钮可以去掉或者自己修改样式,我这里使用的like_button

  • UI 开源组件Flutter图表范围选择器使用详解

    UI 开源组件Flutter图表范围选择器使用详解

    目录 前言 1. 使用 chart_range_selector 2. ChartRangeSelector 实现思路分析 3.核心代码实现分析 4. 结合图表使用 前言 最近有一个小需求:图表支持局部显示,如下底部的区域选择器支持 左右拖动调节中间区域 拖拽中间区域,可以进行移动 图表数据根据中间区域的占比进行显示部分数据 这样当图表的数据量过大,不宜全部展示时,可选择的局部展示就是个不错的解决方案.由于一般的图表库没有提供该功能,这里自己通过绘制来实现以下,操作效果如下所示: 1. 使用 c

  • 封装flutter状态管理工具示例详解

    目录 引言 RxBinder 代码实现 Demo 完美运行 引言 关于 Flutter 状态管理,公司项目使用的是Bloc方案.Bloc 其实本质上是 provider 的封装扩展库,整体通过 InheritedWidget .Notifier 外加 Stream中转实现状态变更通知. 关于 Bloc 实现原理,有兴趣的同学可以观看这篇文章 Bloc原理解析 RxBinder 撇开Bloc内部实现策略,小轰尝试基于数据驱动模型,自定义一套状态管理工具.构思如下: 主要成员如下: RxBinder

  • 正确在Flutter中添加webview实现详解

    目录 前言 安装 运行项目遇到的问题 前言 为什么要在flutter中引入webview?这不是废话么,当然是为了加载一个网页,这不是移动端最基本的需求么,哈哈!说的真不错,接下来我要是告诉你我的用法,你可能要大吃一惊.我的用处很简单,那就是在webview中再加载一个flutter编译成web的项目.有没有吓到你.别怕,我这么做的原因很简单,就是为了热更新.可能在flutter中实现热更新的方法有很多,但我敢说我这么做就是最好的热更新方式.当我内容发生变更是时候,我不需要继续去审核,只需要在服

  • flutter text组件使用示例详解

    目录 正文 Text组件 Text组件构造器上的主要属性 正文 flutter组件的实现参考了react的设计理念,界面上所有的内容都是由组件构成,同时也有状态组件和无状态组件之分,这里简单介绍最基本的组件. 在组件代码的书写方式上,web端开发的样式主要有由css进行控制,而客户端开发根据使用的技术栈不同,写法也稍微有些不同:ReactNative的写法和web比较类似,但是ReactNative是使用StyleSheet.create()方法创建样式对象,以内联的方式进行书写. import

  • Flutter CustomPaint自定义绘画示例详解

    目录 正文 CustomPaint 介绍 绘制点 PointMode3种模式 绘制线 和路径 绘制五子棋 总结 正文 CustomPaint是Flutter中用于自由绘制的一个widget,它与android原生的绘制规则基本一致,以当前Canves(画布)的左上角为原点进行绘制.在有些场景中,我们会需要绘制一些高度定制化的组件,比如 UI 设计师给我们出了个难题 —— 弄一个奇形怪状的边框.这个时候我们就不能直接使用 Flutter 自带的那些组件了,而是需要手动绘制组件,那就会需要用到 Cu

随机推荐