1 ExpansionPanel 收缩面板。它有一个标题和一个正文,可以展开或折叠。面板的正文主体仅在展开时可见。收缩面板仅用作为 ExpansionPanelList的子级。
类似于这种,Flutter 给我们提供了相当便捷的 UI 组件 ExpansionPanel。 ExpansionPanel 看名字也能看出来,是一个"扩展面板"。...那我们点进源码看一下构造函数: ExpansionPanel({ @required this.headerBuilder, @required this.body, this.isExpanded...ExpansionPanel( headerBuilder: (BuildContext context, bool isExpanded) { return...在上面的gif图我们也能看出来,只有点击箭头才能展开,如果想要点击 header 也要展开的话, 使用 ExpansionPanel 的 canTapOnHeader 参数: ExpansionPanel...ExpansionPanelRadio 和 ExpansionPanel 的区别就是一个 value。 ExpansionPanelRadio 是用 value 来区分的,所以每一个要是唯一的。
ExpansionPanel的构造方法: 代码: ---- ExpansionPanel({ @required this.headerBuilder,//标题构造器 @required...this.body,//内容区域 this.isExpanded = false//是否展开 }) 构造方法非常的简单,但是在这里需要注意的是ExpansionPanel不是一个Widget...,对ExpansionPanel分别设置了它的标题和内容。...但是这个时候无论我们怎么点击右侧的图标都没有任何的反应,那是因为这个ExpansionPanel我们默认设置的是关闭的状态,而且我们也并没有对ExpansionPanelList的点击事件做处理。...this.isExpanded; } }); } 并且将isExpanded的值设置给ExpansionPanel的isExpanded属性。 接下来再来看下效果: ?
MaterialExpansionPanel Selector: 材料风格的扩展面板。 一个或多个面板在扩展面板集中组合在一起。...MaterialExpansionPanelSet Selector: 一个指令,它将一组MaterialExpansionPanel转换为一个折叠小部件...MaterialExpansionPanelAutoDismiss Selector: 一个自动折叠MaterialExpansionPanel...用法示例: MaterialExpansionDemo 查看示例
ExpansionPanel 扩展面板包含创建流并允许轻量级地编辑元素。 ExpansionPanel小部件实现了这个组件。 ? SnackBar 带有可选操作的轻量级消息,简要显示在屏幕底部。
我们一般在写业务的时候多会用到下拉菜单, 前面讲过 ExpansionPanel, ExpansionPanel大部分情况用来实现展开列表等稍微复杂的业务逻辑。
IconButton、PopupMenuButton、ButtonBar、TextField、Checkbox、Radio、Switch、Slider、SimpleDialog、BottomSheet、ExpansionPanel
睡眠质量测试系统”“随手拍”“实验室安全测试平台”“天气预报系统”等项目案例阐述I_inearProgresslndicator、AlertDialog、SimpleDialog、BottomSheet、Card、ExpansionPanel
ExpansionPanel https://github.com/florent37/ExpansionPanel 这是另外一个来自于 Florent Champigny 的很棒的库。
SingleChildScrollView(child: ExpansionPanelList( children: mList.map((index) { return new ExpansionPanel
如果你还没有了解过 ExpansionPanelList,那么我建议读我的这篇文章:Flutter ExpansionPanel 超级实用展开控件 剩下的就很简单了,通过数据来判断是否展示 已使用标识
领取专属 10元无门槛券
手把手带您无忧上云