首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Flutter 组件集录 | 下拉菜单 DropdownMenu 组件

    前言 Flutter 框架中新增了 DropdownMenu 下拉按钮,可以让我们更方便地实现下拉选择的交互。本文案例源码可以详见 【FlutterUnit 的 DropdownMenu】 2....DropdownMenu 基础使用 首先通过一个最简单的案例体验一下 DropdownMenu 的使用,如下所示: 点击使会下拉展示菜单选项,选择科目 ; 点击时选中科目,下方的文本相应变化; 支持输入定位到指定的菜单条目...DropdownMenu 样式配置 DropdownMenu 本质上是由 TextField + MenuAnchor 实现的,所以样式配置上面主要和这两个组件有关。...借此我们也可以学到如何让一个组件响应快捷键处理逻辑。 其中最核心的视图表现是对 MenuAnchor 组件的封装,在 builder 回调中构建输入框、首尾按钮等展示内容。...之后有机会,会详细介绍一下 MenuAnchor 组件的使用。那么本就到这里,谢谢观看 ~

    5.2K10

    ArkUI滚动类组件-下拉刷新(Refresh)

    下拉刷新也是一个很常用的功能,比如我们在浏览新闻时可以下拉刷新最新资讯等,ArkUI开发框架给我们提供了下拉刷新组件:Refresh,它的用法很简单,给需要下拉刷新的组件外包上 Refresh 就可以了...: number | string }): RefreshAttribute;}refreshing:控件是否显示刷新动画,默认不显示offset:下拉的偏移量,当下拉的距离超过该值时,控件进入刷新状态...,RefreshStatus 定义了以下 5 种状态:Inactive:组件的起始状态,当手指点击屏幕时触发此状态。...Drag:下拉组件但没有到达刷新距离的状态。OverDrag:下拉组件距离超过了刷新距离的状态。Refresh:正在刷新状态。Done:刷新结束。...onRefreshing:组件进入 Refresh 状态后对外的回调,一般在该回调里进行网络请求等操作。

    17820

    组件封装之输入框下拉列表

    项目是使用iview组件的,一开始想着在自定义iview的下拉选择,后来发现效果并不理想。为了实现功能,就在iview输入框的基础上进行了组件封装,下面就来讲下组件封装的过程。...思路: 对于组件封装,首先需要确定功能,组件的整体结构,后面再去处理组件的数据交互逻辑。 过程: 组件的结构以及样式: 话不多说,先把组件基本的结构样式贴出来。...定义组件的data data() { return { // 控制下拉列表显示 dropdownShow: false, // 控制下拉列表数据为空提示显示...给组件添加一个clickoutside指令 自定义clickoutside指令,当点击组件外的区域时隐藏下拉列表。...> /* 引入输入下拉组件 */ import selectInput from '.

    2.2K40

    自绘制HT For Web ComboBox下拉框组件

    传统的HTML5的下拉框select只能实现简单的文字下拉列表,而HT for Web通用组件中ComboBox不仅能够实现传统HTML5下拉框效果,而且可以在文本框和下拉列表中添加自定义的小图标,让整个组件看起来更直观...,今天我就如何制定ComboBox自定义下拉框做一番探讨。...ComboBox好像也没什么特殊的,是的,按照规范的ComboBox设计,完全可以实现同样的效果,但是今天的主要任务并不是讨论有多少实现方案,今天的首要任务是介绍HT for Web的ComboBox自定义下拉列表的用法...整体思路就是这样子的,相应的图形comboBox组件也是如此的设计思路,接下来我们来了解下ComboBox和HT for Web网络拓扑图组件GraphView的联动效果实现吧。 ? ?...到此自绘制HT for Web ComboBox下拉框组件的介绍就结束了,HT for Web通用组件的灵活性和易用性还不止如此,在本文中涉及到矢量、ComboBox、拓扑图组件等几个关键的知识点,在后续的文章中会做具体的阐述

    93130

    HarmonyOS 开发实践 —— 基于Refresh组件的下拉刷新

    场景一实现页面下拉刷新距离回调以及刷新距离自定义。...根据refresh的builder自定义刷新样式的组件,图标地方使用了两个组件,一个是没有触发刷新状态时显示的logo,另一个是当进入刷新状态时显示的动态loading,这两个组件的显示与隐藏主要通过visibility...给图标设置一个缩放值,下拉距离发生变化时会触发回调onOffsetChange,当下拉距离小于触发刷新距离时,该缩放值会根据下拉的距离从0开始慢慢变大到1,当下拉距离大于设置的刷新距离时,图标缩放值也从...核心代码第一步:自定义refresh刷新组件。...// 自定义refresh刷新组件@BuildercustomRefreshComponent() {  Stack() {    Column() {      // 定义图标      Image(

    19120

    自绘制HT For Web ComboBox下拉框组件

    传统的HTML5的下拉框select只能实现简单的文字下拉列表,而HT for Web通用组件中ComboBox不仅能够实现传统HTML5下拉框效果,而且可以在文本框和下拉列表中添加自定义的小图标,让整个组件看起来更直观...,今天我就如何制定ComboBox自定义下拉框做一番探讨。...ComboBox好像也没什么特殊的,是的,按照规范的ComboBox设计,完全可以实现同样的效果,但是今天的主要任务并不是讨论有多少实现方案,今天的首要任务是介绍HT for Web的ComboBox自定义下拉列表的用法...整体思路就是这样子的,相应的图形ComboBox组件也是如此的设计思路,接下来我们来了解下ComboBox和HT for Web网络拓扑图组件GraphView的联动效果实现吧。 ? ?...到此自绘制HT for Web ComboBox下拉框组件的介绍就结束了,HT for Web通用组件的灵活性和易用性还不止如此,在本文中涉及到矢量、ComboBox、拓扑图组件等几个关键的知识点,在后续的文章中会做具体的阐述

    1.1K60
    领券