首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【Flutter 专题】104 图解自定义 ACEDropdownButton 下拉框

和尚之前尝试过 Flutter 自带的 DropdownButton 下拉框,简单方便;但仅单纯的原生效果不足以满足各类个性化设计;于是和尚以 DropdownButton 为基础,调整部分源码...DropdownButton 源码 DropdownButton 源码整合在一个文件中,文件中有很多私有类,不会影响其它组件; 以和尚的理解,整个下拉框包括三个核心组件,分别是 DropdownButton...、_DropdownMenu 和 _DropdownRoute; ?...最大高度比屏幕高度最少差一个 item 容器空间,用来用户点击时关闭下拉框; _MenuLimits getMenuLimits(Rect buttonRect, double availableHeight...中转设置下拉框背景色; class _DropdownMenuState extends StateDropdownMenu> { ...

2K20

Flutter 源码系列:DropdownButton 源码浅析

DropdownButton 构造函数及简单使用 其实关于 DropdownButton 的构造函数和简单使用我在上一篇文章中已经有过讲解, 如有不懂怎么用的,可以看这篇文章:Flutter DropdownButton...下面重点说一下 DropdownButton 是如何实现的。 DropdownButton 的实现 我们需要带着如下几个问题去看源码: 1.DropdownButton 是用什么来实现的?...2.在点击 DropdownButton 的时候发生了什么?3.为什么每次弹出的位置都是我上次选择item的位置? 带着如上问题,我们开始。 DropdownButton 是用什么实现的?...上面可以看到在点击的时候跳转到了 _DropdownRoute,而 _DropdownRoute 最终返回了一个 _DropdownMenu。..._DropdownMenu _DropdownMenu 是一个有状态的小部件,那我们直接看它的 _State.

1.7K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    TDesign 更新周报(2022年7月第2周)

    优化允许输入滚动的使用体验TimeRangePicker 修复允许输入的缺陷Select: 修复远程搜索动态生成选项失败的缺陷虚拟滚动支持远程搜索场景Dialog: 修复阻止冒泡导致 popup 无法正常关闭...类型Cascader: 修复筛选无法输入问题DatePicker: 优化面板月份展示Transfer: 全选应该只选择搜索后的结果Dialog: 修复 dialog 阻止冒泡导致 popup 无法正常关闭...TimePicker: 支持毫秒场景使用 Bug FixesTable: 可编辑功能,值为 null 时会导致页面报错,如清除 Select 数据Dialog: 修复 dialog 阻止冒泡导致 popup 无法正常关闭...: 修复关闭时无动画的问题 FeaturesFab: 支持文本自适应Tag: 视觉更新支持图标DropdownMenu: 新增 toggle 示例方法,用于切换下拉菜单DropdownMenu: 新增...: 修复 dropdownmenu-item 的 label 不支持动态更新等问题DropdownMenu: 修复 radio、checkbox 样式问题详情见:https://github.com/Tencent

    2.3K10

    TDesign 更新周报(2022年5月第4周)

    Miniprogram for WeChat 发布 0.12.1 Bug Fixes Dialog:修复按钮传入 openType 不生效的问题 Collapse:修复 t-class 外部样式类无法使用的问题 DropdownMenu...节点支持自定义样式 Bug Fixes Tabbar:优化代码避免在 setData 里传输不必要的页面实例 Sticky:修复在无法获取页面实例时报错的问题 Skeleton:添加组件基础默认样式 DropdownMenu...:修正遮罩层的位置,以及下拉菜单的高度 DropdownMenu:修复菜单选项点击区域过小的问题 BackTop:修复丢失的 to-top 事件 Collapse:修复 header、expand-icon...tdesign-miniprogram/releases/tag/0.12.0 设计资源 Figma for Mobile 发布 1.0.4 Features 新增7类组件:Fab悬浮按钮 / Drawer抽屉 / DropdownMenu...TDesign Vue Starter 发布 0.2.2 升级组件库依赖至0.41.5 优化计算列表吸顶高度与多标签页关系的逻辑 多标签页增加支持指定路由不缓存的功能 Bug Fixes 修复多标签页关闭左侧会关闭首页的问题

    1.7K30

    你知道吗,Flutter内置了10多种Button控件

    DropdownButton DropdownButton为下拉选择按钮,基本用法如下: var _dropValue = '语文'; _buildButton() { return DropdownButton...如果你对选中的选项的样式不满意,可以自定义,用法如下: DropdownButton( selectedItemBuilder: (context){ return [ Text...当用户未选中时,即value 为null,显示''请选中",用法如下: DropdownButton( hint: Text('请选择'), value: null, ... ) 效果如下...默认情况下,下拉选项的图标是倒立的三角,也可以进行自定义,用法如下: DropdownButton( icon: Icon(Icons.add), iconSize: 24, iconDisabledColor...CloseButton CloseButton是一个material风格的关闭按钮,本身是一个IconButton,点击时默认执行Navigator.maybePop即如果路由栈有上一页则返回到上一页。

    2.9K30

    你知道吗,Flutter内置了10多种Button控件

    , highlightedBorderColor: Colors.red, child: Text('Button'), onPressed: () {}, ) 效果如下: [1240] DropdownButton...DropdownButton为下拉选择按钮,基本用法如下: var _dropValue = '语文'; _buildButton() { return DropdownButton(...效果如下: [strip] 如果你对选中的选项的样式不满意,可以自定义,用法如下: DropdownButton( selectedItemBuilder: (context){ return...( hint: Text('请选择'), value: null, ... ) 效果如下: [1240] 默认情况下,下拉选项的图标是倒立的三角,也可以进行自定义,用法如下: DropdownButton...() Android和IOS平台显示的图标是不一样的,ios效果如下: [1240] Android效果如下: [1240] CloseButton CloseButton是一个material风格的关闭按钮

    2.6K00

    【Flutter】自定义滚动开关

    该演示视频展示了如何在颤动中创建自定义滚动开关。它显示了自定义滚动开关如何在flutter应用程序中使用lite_rolling_switch包工作。...LiteRollingSwitch有一些属性是: **onChanged:**当用户打开或关闭开关时,将调用此属性。 **value:此属性用于确定此开关是打开还是关闭。...*我们将添加textOn是字符串' Yes '表示当开关打开时,文本将显示在按钮上;当textOff是字符串' No '意味着当开关关闭时,文本将显示在按钮上。...我们将添加colorOn表示,当开关处于打开状态时,颜色将显示在按钮上;当colorOff意味着当开关处于关闭状态时,颜色将显示在按钮上。...我们将添加animationDuration手段来延迟动画的开始并添加onChanged表示用户打开或关闭开关的时间。当我们运行应用程序时,我们应该获得屏幕的输出,如屏幕下方的截图所示。

    33.4K60

    TDesign 更新周报(2022年10月第1周)

    组件库Vue2 for Web 发布 0.48.5 FeaturesSelect: 调整下拉交互 允许输入时不关闭下拉面板 减少相关交互问题 @uyarn (#1600)Datepicker: 支持 valueType...(#1583)添加参数 response 到事件 onSuccess,单文件是对象,多文件是数组,tdesign-vue-next#1774 @chaishi (#1584)TimePicker: 关闭面板不再滚动...避免部分场景滚动未结束关闭面板继续滚动引发的问题 @uyarn (#1590)Select: value 参数类型检测报错修复,增加 value 传值异常流的控制台提示 @skytt (#1574)详情见...selector @anlyyao (#894)Message: 函数式Dialog.hide() 关闭窗体支持自定义 selector @anlyyao (#894)详情见:https://github.com...onChange 属性无效的问题 @anlyyao (#367)Grid: 修复 gutter 无效 @anlyyao (#381)Grid: 修复 border 无效 @anlyyao (#381)DropdownMenu

    1.5K20

    TDesign 更新周报(2022年7月第3周)

    修复可选中行 table 组件,data 为空数据时,默认全选按钮会选中的问题InputNumber: 修复初始化时对 null 及字符串校验异常Dialog: 多个 dialog 同时存在时使用 esc 关闭异常...Pagination: 修复左右切换禁用失效问题table: 修复树形结构,懒加载顺序问题TagInput: 修复hover时组件换行的样式异常drawer: 修复开启 destroyOnClose 时多次打开关闭时动效丢失问题...Skeleton: 属性 rowCol 移除默认值 [1, 1, 1, { width: 70% }] ,存在不兼容更新 FeaturesPicker: 增加 autoClose 属性,点击确认、取消、遮罩层时自动关闭...FixesPicker: 修复 pick 事件返回的 label 不正确的问题Picker: confirm-btn 和 cancel-btn 增加 boolean 类型,值为 true 时使用默认文案DropdownMenu

    2.8K30
    领券