文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

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

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

2.4K20

Flutter 源码系列：DropdownButton 源码浅析

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

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

    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.9K10

    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 修复多标签页关闭左侧会关闭首页的问题

    2.2K30

    你知道吗，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即如果路由栈有上一页则返回到上一页。

    4K30

    你知道吗，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风格的关闭按钮

    3.2K00

    【Flutter】自定义滚动开关

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

    36.5K60

    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

    2.1K20

    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

    3.5K30
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券