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

如何在Flutter中单击另一个扩展磁贴后折叠已打开的扩展磁贴?

在Flutter中,可以使用ExpansionTile组件来创建可折叠的扩展磁贴。ExpansionTile是一个带有标题和内容的可展开的列表项,当用户点击标题时,内容部分会展开或折叠。

要实现在单击另一个扩展磁贴后折叠已打开的扩展磁贴,可以通过管理每个扩展磁贴的展开状态来实现。可以使用一个变量来记录当前展开的扩展磁贴的索引,初始值为-1表示没有任何扩展磁贴被展开。

以下是一个示例代码:

代码语言:txt
复制
import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _expandedTileIndex = -1;

  void _handleTileTap(int index) {
    setState(() {
      if (_expandedTileIndex == index) {
        _expandedTileIndex = -1; // 当前扩展磁贴已经展开,再次点击则折叠
      } else {
        _expandedTileIndex = index; // 展开新的扩展磁贴
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('可折叠的扩展磁贴'),
      ),
      body: ListView.builder(
        itemCount: 5, // 假设有5个扩展磁贴
        itemBuilder: (context, index) {
          return ExpansionTile(
            title: Text('磁贴 $index'),
            children: <Widget>[
              ListTile(
                title: Text('内容 $index'),
              ),
            ],
            onExpansionChanged: (expanded) {
              _handleTileTap(index);
            },
            initiallyExpanded: _expandedTileIndex == index,
          );
        },
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: MyHomePage(),
  ));
}

在上述代码中,我们使用ListView.builder创建了一个包含5个扩展磁贴的列表。每个扩展磁贴都有一个标题和一个内容部分。通过设置onExpansionChanged回调函数,可以在扩展磁贴展开或折叠时触发相应的操作。在_handleTileTap函数中,我们根据当前展开的扩展磁贴的索引来判断是否需要折叠已打开的扩展磁贴。

这样,当用户单击一个扩展磁贴时,如果该扩展磁贴已经展开,则会被折叠起来;如果该扩展磁贴未展开,则会展开,并折叠其他已展开的扩展磁贴。

关于Flutter的更多信息和学习资源,可以参考腾讯云的Flutter开发文档:Flutter开发文档

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

我是如何在Fiori上添加UI应用的

SAP Fiori launchpad是移动或桌面设备上Fiori应用的切入点。Lunchpad会显示各种功能性的磁贴。每个磁贴表示用户可以启动的业务应用程序。...启动板是基于角色的,根据用户的角色显示切片。 今天聊一下,如何使自定义UI在SAP Fiori启动板中显示为应用程序磁贴,使用自定义UI应用程序扩展业务目录。...如下图所示: image.png 有了这个扩展应用程序后,就方便了我们后面的步骤中使用。...image.png 点击Publish后,你会看到应用的状态是已发布的状态,如下图所示: image.png 打开UI应用 此时,我们点击Home,然后转到Fiori Launchpad,随后,点击刷新或者...F5刷新页面,这时,我们会看到一个新的磁贴,我们点击这个磁贴,打开自定义的UI应用。

1.9K40

Windows快捷键速查

Alt + Shift + 箭头键 当组或磁贴的焦点放在“开始”菜单上时,可将其朝指定方向移动。...Ctrl + Shift + 箭头键 当磁贴的焦点放在“开始”菜单上时,将其移到另一个磁贴即可创建一个文件夹。 Ctrl + 箭头键 打开“开始”菜单后调整其大小。...任务栏 快捷键 说明 Shift + 单击任务栏按钮 打开应用或快速打开另一个应用实例。 Ctrl + Shift + 单击任务栏按钮 以管理员身份打开应用。...Num Lock + 星号 (*) 显示选定文件夹下的所有子文件夹。 Num Lock + 加号 (+) 显示选定文件夹中的内容。 Num Lock + 减号 (-) 折叠选定文件夹。...向右键 显示当前选择内容(如果已折叠),或选择第一个子文件夹。 向左键 折叠当前选择内容(如果已展开),或选择该文件夹所在的文件夹。 End 显示活动窗口底部。 Home 显示活动窗口顶部。

4.3K20
  • 我是如何在Fiori上添加UI应用的

    1、微信:我是如何在Fiori上添加UI应用的 2、知乎:我是如何在Fiori上添加UI应用的 正文前序 我在之前的文章推送里写了不少关于SAP Fiori的文章,有关于技术的也有浅谈理论发展的文章,...有兴趣的朋友可以阅读一下。...SAP Fiori launchpad是移动或桌面设备上Fiori应用的切入点。Lunchpad会显示各种功能性的磁贴。每个磁贴表示用户可以启动的业务应用程序。...启动板是基于角色的,根据用户的角色显示切片。 今天聊一下,如何使自定义UI在SAP Fiori启动板中显示为应用程序磁贴,使用自定义UI应用程序扩展业务目录。...自定义目录 首先,我们在SAP Fiori launchpad里找到自定义目录扩展应用程序,这个是SAP系统提供的,以方便使用或者实施者方便进行应用扩展。如下图所示: ?

    95630

    Android 13 首个开发者预览版到来

    对于提供 自定义磁贴 的应用,我们会让用户更容易发现您的磁贴,并将它们添加到快捷设置中。通过新的 磁贴放置 API,您的应用现在可以提示用户,直接将您的自定义磁贴添加到快捷设置磁贴组中。...一个新的系统对话框让用户无需离开您的应用,只需单次点击即可添加磁贴,而无需前往快捷设置中手动添加磁贴。...主题应用图标 - 在 Android 13 中,我们将 Material You 动态颜色扩展到 Google 应用之外的所有应用图标,让用户可以基于其壁纸和其他主题偏好来选择图标色调。...我们还增加了新的模块,如蓝牙和超宽频模块,以进一步扩大 Android 可更新核心功能的范围。...在手动安装预览版本后,您将通过 OTA 方式自动获得后续预览版和 Beta 版更新。

    1K20

    Windows10中的键盘快捷方式

    向上键 将光标移动到上一段落的起始处 Ctrl + Alt + Tab 使用箭头键在所有打开的应用之间进行切换 Alt + Shift + 箭头键 当组或磁贴的焦点放在“开始”菜单上时,可将其朝指定方向移动...Ctrl + Shift + 箭头键 当磁贴的焦点放在“开始”菜单上时,将其移到另一个磁贴即可创建一个文件夹 Ctrl + 箭头键 打开“开始”菜单后调整其大小 Ctrl + 箭头键(移至某个项目)+...Alt + 向左键 查看上一个文件夹 Backspace 查看上一个文件夹 向右键 显示当前选择内容(如果已折叠),或选择第一个子文件夹 向左键 折叠当前所选内容(如果已展开),或选择该文件夹所在的文件夹...Windows 徽标键  + Ctrl + F4 关闭你正在使用的虚拟桌面 任务栏键盘快捷方式 按键 操作 Shift + 单击任务栏按钮 打开应用或快速打开另一个应用实例 Ctrl + Shift...+ 单击任务栏按钮 以管理员身份打开应用 Shift + 右键单击任务栏按钮 显示应用的窗口菜单 Shift + 右键单击分组任务栏按钮 显示组窗口菜单 Ctrl + 单击分组任务栏按钮 循环浏览组窗口

    4.5K20

    如何创建SAP UI5项目?

    框架, 拥有丰富的界面控件、CSS页面展示模板、上百个工业图标,同时支持控件的扩展。...SAP UI5架构由核心JavaScript框架组成,包括jQuery等,是由扩展库控件和主题组成,并且有可选的服务器组件。...接下来就看一下今天要说的内容的具体的操作步骤。 打开向导 我们可以使用SAP 提供的向导进行创建,非常便捷,选择File - New - Project from Template,如下图所示: ?...选择SAP UI5 我们可以通过过滤条件,输入sapui5和Cloud Foundry,作为条件来筛选需要的磁贴应用,这样可以查找到名为SAPUI5 Application的磁贴,然后单击Next。...项目文件 我们单击文件夹图标,把目录展开,有一些关于SAP UI5架构的内容,我在以前也推送过,可以查看公众号的文章(公众号:SAP Technical),显示如下图所示: ?

    69820

    Windows 8.1 应用再出发 - 磁贴的更新

    本篇和大家一起了解一下Windows 8.1 中磁贴的更新,我们来看看如何利用它做出更好的应用磁贴。...如下图中IE和地图等属于小磁贴,阅读列表属于中磁贴,资讯属于宽磁贴,天气属于大磁贴。需要注意的是,小磁贴是不支持动态磁贴的。 ? 看完了展现形式,我们来看看怎样在应用中设置这四种磁贴呢?...(Windows 8.1 中,应用安装后,磁贴不会出现在“开始”屏幕,默认磁贴大小的设置会在用户固定应用时生效) 我们可以指定哪几种磁贴显示应用名称,但是小磁贴是无法显示名称的(另外小磁贴不支持动态磁贴...四种磁贴中,70 * 70 小磁贴 和 150 * 150 中磁贴是所有应用都支持的。310 * 150 宽磁贴 和 310 * 310 大磁贴是可选择的。 但有两点需要注意:1....如不支持宽磁贴,则默认大小不可选择为宽磁贴。2. 如想支持大磁贴,则必须支持宽磁贴。 我们分别按照每种磁贴的尺寸要求设置磁贴,然后来看看程序清单文件的变化: <?

    85660

    Metro磁贴应用显示语言变为英文解决办法

    可能有朋友和reizhi一样,在使用Windows 8/8.1的过程中遇到了metro磁贴应用突然变为英文的情况。虽然单词不多,但看起来终归有些生疏。...其实Windows 8/8.1自带的磁贴应用均支持多语言环境,只需进行几步设置即可切换为中文显示。  1.打开:控制面板\时钟、语言和区域,选择区域,并切换到位置选项卡。...确保当前位置设置为中国; 2.切换到管理选项卡,确保非Unicode程序语言设置为中文; 3.打开:控制面板\时钟、语言和区域\语言,确保中文输入法位于第一的位置; 4.对于新闻等应用...,还需要运行后打开charm栏,点击设置,将语言改为中文中国。...经过以上步骤,即可将Windows内置的metro磁贴应用的语言从英文切换为中文。

    60510

    GEE 错误:导出到谷歌云盘中出现的错误Error: Image to render must have 1 or 3 bands, but found 30. (Error code: 3)

    参数: image (图像): 要导出为磁贴的图片。 description(字符串,可选): 任务的可读名称。默认为 "myExportMapTask"。...默认为 "auto",这意味着不透明的磁贴将编码为 "jpg",透明的磁贴将编码为 "png"。 path(字符串,可选): 用作输出路径的字符串。尾部的"/"为可选项。默认为任务描述。...writePublicTiles(布尔,可选): 是否写入公共磁贴,而不是使用水桶的默认对象 ACL。默认为 true,并要求调用者是水桶的所有者。...maxZoom(数值,可选): 要导出的地图磁贴的最大缩放级别。 scale(数值,可选): 最大图像分辨率(单位:米/像素),可替代 "maxZoom"。...bucketCorsUris(List,可选): 允许从 JavaScript 获取导出磁贴的域列表(如 https://code.earthengine.google.com)。

    18110

    IDM互联网下载管理器

    打开“选项-常规”将监视剪切板中的下载地址 ,进行勾选。. ?...谷歌浏览器自动调用IDM 想要谷歌浏览器自动调用IDM就需要将IDM的扩展程序集成到浏览器中。这样我们在浏览器中点开下载链接时就会像迅雷一样自动被调用打开。...找到IDM安装文件内的谷歌浏览器扩展程序安装文件:IDMGCExt.crx ? 将此crx文件直接拖拽到谷歌浏览器扩展程序管理界面进行安装。...image.png 注意事项:如果将扩展程序都安装好了,IDM依旧不会被调用,这时候我们需要将IDM下载工具使用管理员权限打开一次。...配合油候脚本下载百度网盘内容(包括BT磁链) 一、先说说我是如何间接使用IDM下载种子磁链的吧。先将你的需要下载的种子文件使用百度网盘的进行离线下载,转存到百度网盘。 ?

    2K84

    Windows 10 新特性变化研究 - 腾讯ISUX

    二.开始菜单回归 Win10里开始菜单真正回归,并在菜单的左边新增Win8开始屏幕的磁贴显示功能。 ? 菜单演变过程: ? ? ? ?...变化分析: 从Win8~10的变化中,笔者大胆猜测微软不会放弃磁贴的设计。毕竟移动是主流,PC市场在衰弱,而微软又想所有设备使用一个系统,磁贴设计无疑更适合在移动端上使用。...甚至可能等磁贴的体验成熟后,开始菜单有可能会逐步退出用户的视线(以后的开始菜单=苹果的home键?开始屏幕=iOS的桌面?),大家也不妨对未来的Windows菜单进行大胆猜想。...菜单全屏后其实就是Win8 的metro UI了,因此猜测是在培养用户对磁贴的使用习惯? 六.窗口自适应 当对窗口进行拉伸缩放时,窗口内的元素会跟随窗口的变化进行自适应调整。 ?...(PS:最新的通知中心已变成侧栏打通,如下图) ? 八.强化全局搜索 任务栏上新增了搜索按钮,点击后会打开一个小的搜索窗口。默认先搜索本机程序,然后再搜索互联网内容,也会给出相应的搜索建议。

    3.2K20

    shopify主题Pacific模板配置修改

    Shopify Pacific主题一个经受住了时间考验的经典 Shopify 主题,与现有的OS 2.0兼容。使用经过验证的灵活主题建立您的业务,以帮助商店发展。...非常适合 五金与汽车、健康与美容、运动与休闲 Shopify Pacific主题特色 Mega导航 通过包含产品图片的多列菜单、多层侧边栏菜单和站点范围的促销磁贴,轻松发现产品。...可以随着您的成长而成长 Pacific 的可定制功能使其能够随着您的业务增长而增长,并随着时间的推移扩展产品目录。...网站范围的促销磁贴 从 Shopify 后台中的一个选项卡中突出显示所有页面中的销售、折扣和特色产品。 多列菜单 在大型多列下拉菜单中展示产品图片。...多层侧边栏菜单 在优雅的侧边栏菜单中显示产品,产品系列,社交媒体链接等。 定制模块 创建特殊的主页部分,如促销块,常见问题解答,博客文章等。

    1.6K20

    3.2 PowerBI报告可视化-切片器:报告必不可少的切片器

    在格式窗格的值中,可以选择是否包含今天,还可以手工输入指定的定位日期。iii 垂直列表/磁贴/下拉这几个样式可用于日期、数字,还可用于文本。...垂直列表和磁贴比较直观,选项值一目了然,但会占用较多的页面空间,适用于选项值比较少的情况,其中磁贴在触摸屏上优势明显;下拉比较节约页面空间,有限的空间可以放置更多的切片器。...2 为切片器添加搜索框垂直列表/磁贴/下拉切片器中,如果有较多的选项值,比如客户名称,可以通过点击切片器右上角的三个点,选中搜索,就可以添加搜索框。...3 选择方式:单选/多选(按住Ctrl键)/多选(直接挑勾)/全选对于垂直列表/磁贴/下拉切片器,在格式窗格中,可以设置选择方式。...此时会跳出对话框提示是否同步视觉对象,同步的话,复制后的切片器会和来源处切片器所选的值保持一致。在一个页面选中切片器,然后在视图中打开同步切片器窗格也可以实现上面的操作。

    12410

    Wear 更新一览

    磁贴 (Tiles) - 磁贴让用户可以快速访问他们最需要的信息,以及提供符合预期的操作互动。我们现在已经向开发者开放了磁贴功能,并且与几位早期合作伙伴进行合作,将磁贴添加到他们的应用中。...以下是一些即将推出的应用: Tiles API 目前为 alpha 版本,支持 Wear OS 2 及以上的设备,所以您可以为 Wear 生态系统中的所有设备创建磁贴。...磁贴将在平台版本更新后出现在消费者的手表中,请阅读 这篇博文 了解详情。 任务切换和当前活动 - 新版本的 Wear 使用户能够轻松地在应用之间切换。...只需极少的代码,您就可以通过新的 Ongoing Activities API,让用户在导航离开 (开启其他任务,如音乐播放) 后轻松返回您的应用: 只需轻点表盘底部的活动指示器图标,双击侧面按钮,或通过全局应用启动器的...该平台会帮您管理硬件和传感器,能及时让硬件停止工作,以免电池耗尽,从而让您从亲自管理硬件的泥沼中摆脱出来。此健康服务平台的 alpha 版本已经发布,请阅读 官方文档 了解详情。

    86020

    大白技术控 | Windows10X 模拟器简单上手体验

    开始菜单与圆角化 从 Windows8 时代开始,以磁贴为代表的直角设计便充斥在 Windows 界面的各个角落。但是在 Windows10X 中,界面全面转向了圆角,注意哈,我说的是全面。...你可能会说,不就是变一个圆角吗,有什么稀奇的? 有。 圆角本身只是一种设计,但它却会对UI造成直接的影响,进而影响到系统功能。最直观的后果就是陪伴了我们两个大版本的磁贴被取消了。...圆角矩形堆叠时必然会产生一个个无法填充的死角,多了就会形成一个个空洞,这是很难看的。 当然,磁贴取消有视觉原因也有功能原因,只说视觉有些牵强。...原来的磁贴都是放在开始菜单中,理论上它可以显示很多的信息,并有一些有趣的动画效果。但在桌面系统中,我们打开开始就意味着结束,磁贴占据面积大,又没有多少软件适配,理想很美好,现实很骨感,不如砍了吧。...所以当应用进行扩展后,可以有更多的交互操作与信息展示空间 再以 Microsoft Edge 为例,或许可以更为直观地看到双屏设备的好处。

    1.7K20

    精读《磁贴布局 - 性能优化》

    但磁贴布局的碰撞判断涉及整个画布,因为一个组件的移动可能引发另一个组件的移动,形成一系列连环布局变化,比如下面这个情况: [---] [ ] [...因此磁贴碰撞的时间复杂度是 O(n²),比如页面中有 100 个组件,就至少要遍历 10000 次才能完成一次布局计算,这样在比较极限的情况下,比如页面有 1000 个组件时,布局计算肯定非常耗时。...除了碰撞判断外,磁贴拖拽过程中还有两个场景需要计算组件间碰撞关系,主要包括 落点位置 与 落点后组件排序 两个场景。...落点后组件排序 落点位置决定后,由于落点位置毕竟发生了变化,落点之后的组件都要重新按照磁贴向上的重力作用排序,所以此时组件查找范围是包含落点所在区域内,垂直向下的所有区域: [---] │...总结 经过优化,磁贴布局在拖拽前、中、后各个阶段的计算复杂度均为 O(n),即一个拥有 500 个组件实例的复杂画布,也只要在每次拖动时循环 500 次计算位置,而配合空间换时间的一些 Map 映射关系配合

    79430

    科学瞎想系列之一五三 说说永磁同步电机里那些角

    在三角学中,“角”又是三角函数的自变量。任意一个三角函数,如:f(θ)=sinθ的自变量θ也被称作是一种“角”,即“相位角”或简称为“相角”。...将永磁磁链矢量ψf放在复平面中即得到如图3所示的永磁磁链矢量图,图3a)为表贴式永磁转子;图3b)为内嵌式永磁转子。 ​...经过上述等效处理后,将定子电流矢量iₛ(电枢磁势矢量fₛ)、转子永磁磁链矢量ψf同时放在复平面中,即得到如图4所示的永磁磁同步电机的等效物理模型,图4直观反映了三相定子绕组电磁等效处理过程以及定子电流矢量...4.3 永磁同步电机的矢量方程及时空相矢图 4.3.1 表贴式 对于表贴式永磁同步电机,认为气隙圆周各处的磁导均相等,电枢反应磁势在气隙任意位置产生的磁场(磁链)大小均相等。...对于永磁同步电动机,反电势E₀总是超前永磁磁链ψf 90ᵒ,因此γ就与β存在固定的关系,即γ=β-90ᵒ,只要给定γ和β中的任意一个角度,就可以得知另一个。

    1.1K20

    科学瞎想系列之一五三 说说永磁同步电机里那些角

    在三角学中,“角”又是三角函数的自变量。任意一个三角函数,如:f(θ)=sinθ的自变量θ也被称作是一种“角”,即“相位角”或简称为“相角”。...将永磁磁链矢量ψf放在复平面中即得到如图3所示的永磁磁链矢量图,图3a)为表贴式永磁转子;图3b)为内嵌式永磁转子。 ​...经过上述等效处理后,将定子电流矢量iₛ(电枢磁势矢量fₛ)、转子永磁磁链矢量ψf同时放在复平面中,即得到如图4所示的永磁磁同步电机的等效物理模型,图4直观反映了三相定子绕组电磁等效处理过程以及定子电流矢量...4.3 永磁同步电机的矢量方程及时空相矢图 4.3.1 表贴式 对于表贴式永磁同步电机,认为气隙圆周各处的磁导均相等,电枢反应磁势在气隙任意位置产生的磁场(磁链)大小均相等。...对于永磁同步电动机,反电势E₀总是超前永磁磁链ψf 90ᵒ,因此γ就与β存在固定的关系,即γ=β-90ᵒ,只要给定γ和β中的任意一个角度,就可以得知另一个。

    2.7K33

    列表视图(ListView和ListActivity)

    History API实现无刷新跳转", "http://pic.cnitblog.com/face/306530/20140307103012.png", "本篇和大家一起了解一下Windows 8.1 中磁贴的更新...,我们来看看如何利用它做出更好的应用磁贴。...首先我们从展现形式上来对比一下Windows 8 与 Windows 8.1 中的磁贴:Windows 8支持两种尺寸的磁贴,正方形磁贴(150 * 150 像素)和长方形磁贴(310 * 150 像"...("揭秘uc浏览器一", "http://pic.cnitblog.com/face/440253/20140306132605.png", "首先,看一下项目完成后的,最终效果是这样的:一.主界面二,...listView.setAdapter(simpleAdapter); 以上就是一般的对于网络图片绑定ListView处理方式,好一点的处理方式是定制扩展一个SimpleAdapter

    1.5K70

    科学瞎想系列之七十八 永磁电机(1)

    ,这就是你转换过程中的“损耗”。...前面的瞎想中老师说过,所有的磁场都是由电流产生的,我们可以用一个线圈,给它通电后就会产生磁场,我们称这种励磁方式为电励磁,用电磁铁励磁的电机是有励磁损耗的,因为电流会在线圈里发热;也可以用一个天然的“磁石...再用通俗的例子打比方,就是银行的“本钱”可以是股东们凑起来的股份钱,这就是电磁铁,这些股东们要分红的,所以是有“励磁损耗”的;也可以是不知哪辈子的老祖宗给我们留下的一笔遗产,这就是永磁铁,因为老祖宗已仙逝...2.5 永磁电机的磁路结构千变万化,但总起来可以分为两大类,一类叫表贴式;一类叫内嵌式,如下图所示。其中(a)为表贴式,(b)(c)均属于内嵌式。 ?...2.7 永磁体一旦充好磁,其励磁磁势就是固定的,这个励磁磁势就是永磁体的矫顽力,把它装到电机上后,就会产生一个固定的空载气隙磁场,电机旋转时就会在电枢绕组中产生一个恒定的空载反电势E0,无论电机在什么状态下运行

    1.4K41
    领券