網站首頁 編程語言 正文
本文實例為大家分享了Flutter折疊控件使用的具體代碼,供大家參考,具體內容如下
1.官方折疊控件ExpansionTiles
官方默認提供了一個折疊控件 ExpansionTiles 主要用于listView做折疊和展開操作的,先來看看一般的用法
Widget _buildTiles(Entry root) { ? ? return new ExpansionTile( ? ? ? title: new Text(root.title), ? ? ? children: root.children.map(_buildTiles).toList(), ? ? ); ? }
title 一般就是點擊的標題,可以是任意的Widget
children 是折疊和展開的List
使用很方便
2.自定義折疊控件ExpansionLayout
由于項目中的使用到的折疊控件是由外部Widget控制的,涉及到一些業務邏輯,使用官方控件ExpansionTiles,存在諸多不便,于是查看ExpansionTiles ,根據ExpansionTiles源碼做自己的修改,主要是根據外部傳入的字段來控制展開和折疊
import 'package:flutter/material.dart'; import 'package:flutter/widgets.dart'; const Duration _kExpand = Duration(milliseconds: 200); class ExpansionLayout extends StatefulWidget { ? const ExpansionLayout({ ? ? Key key, ? ? this.backgroundColor, ? ? this.onExpansionChanged, ? ? this.children = const <Widget>[], ? ? this.trailing, ? ? this.isExpanded, ? }) : super(key: key); ? final ValueChanged<bool> onExpansionChanged; ? final List<Widget> children; ? final Color backgroundColor; ? //增加字段控制是否折疊 ? final bool isExpanded; ? final Widget trailing; ? @override ? _ExpansionLayoutState createState() => _ExpansionLayoutState(); } class _ExpansionLayoutState extends State<ExpansionLayout> ? ? with SingleTickerProviderStateMixin { //折疊展開的動畫,主要是控制height ? static final Animatable<double> _easeInTween = ? ? ? CurveTween(curve: Curves.easeIn); ? AnimationController _controller; ? Animation<double> _heightFactor; ? bool _isExpanded; ? @override ? void initState() { ? ? super.initState(); ? ? //初始化控制器以及出事狀態 ? ? _controller = AnimationController(duration: _kExpand, vsync: this); ? ? _heightFactor = _controller.drive(_easeInTween); ? ? _isExpanded = widget.isExpanded; ? ? if (_isExpanded) _controller.value = 1.0; ? } ? @override ? void dispose() { ? ? _controller.dispose(); ? ? super.dispose(); ? } ? void _handleTap() { ? ? setState(() { ? ? ? _isExpanded = widget.isExpanded; ? ? ? if (_isExpanded) { ? ? ? ? _controller.forward(); ? ? ? } else { ? ? ? ? _controller.reverse().then<void>((void value) { ? ? ? ? ? if (!mounted) return; ? ? ? ? }); ? ? ? } ? ? ? //保存頁面數據 ? ? ? PageStorage.of(context)?.writeState(context, _isExpanded); ? ? }); ? ? //回調展開事件 ? ? if (widget.onExpansionChanged != null) ? ? ? widget.onExpansionChanged(_isExpanded); ? } ? Widget _buildChildren(BuildContext context, Widget child) { ? ? return Container( ? ? ? child: Column( ? ? ? ? mainAxisSize: MainAxisSize.min, ? ? ? ? children: <Widget>[ ? ? ? ? ? ClipRect( ? ? ? ? ? ? child: Align( ? ? ? ? ? ? ? heightFactor: _heightFactor.value, ? ? ? ? ? ? ? child: child, ? ? ? ? ? ? ), ? ? ? ? ? ), ? ? ? ? ], ? ? ? ), ? ? ); ? } ? @override ? Widget build(BuildContext context) { ? ? //執行以下對應的Tap事件 ? ? _handleTap(); ? ? final bool closed = !_isExpanded && _controller.isDismissed; ? ? return AnimatedBuilder( ? ? ? animation: _controller.view, ? ? ? builder: _buildChildren, ? ? ? child: closed ? null : Column(children: widget.children), ? ? ); ? } }
原理其實很簡單,就是根據字段_isExpanded 來控制折疊和展開,內部使用動畫實現對height的控制
Flutter 目前生態資源還是很缺乏,很多需要自定義,一般根據系統相關的控件做修改,是最好的
原文鏈接:https://blog.csdn.net/lizubing1992/article/details/92794950
相關推薦
- 2023-06-04 pandas.DataFrame中提取特定類型dtype的列_python
- 2022-04-09 Mybatis-Plus中dao層、service封裝的方法
- 2022-12-30 python中的decode()與encode()深入理解_python
- 2023-04-08 c#?線程定時器?System.Threading.Timer的使用_C#教程
- 2022-11-30 Golang迭代如何在Go中循環數據結構使用詳解_Golang
- 2022-11-01 Go語言框架快速集成限流中間件詳解_Golang
- 2023-08-30 Git忽略已經提交過一次文件Git忽略文件
- 2022-09-30 QT實現多文件拖拽獲取路徑的方法_C 語言
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支