Flutter折疊控件使用方法詳解
本文實(shí)例為大家分享了Flutter折疊控件使用的具體代碼,供大家參考,具體內(nèi)容如下
1.官方折疊控件ExpansionTiles
官方默認(rèn)提供了一個(gè)折疊控件 ExpansionTiles 主要用于listView做折疊和展開(kāi)操作的,先來(lái)看看一般的用法
Widget _buildTiles(Entry root) { ? ? return new ExpansionTile( ? ? ? title: new Text(root.title), ? ? ? children: root.children.map(_buildTiles).toList(), ? ? ); ? }
title 一般就是點(diǎn)擊的標(biāo)題,可以是任意的Widget
children 是折疊和展開(kāi)的List
使用很方便
2.自定義折疊控件ExpansionLayout
由于項(xiàng)目中的使用到的折疊控件是由外部Widget控制的,涉及到一些業(yè)務(wù)邏輯,使用官方控件ExpansionTiles,存在諸多不便,于是查看ExpansionTiles ,根據(jù)ExpansionTiles源碼做自己的修改,主要是根據(jù)外部傳入的字段來(lái)控制展開(kāi)和折疊
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 { //折疊展開(kāi)的動(dòng)畫,主要是控制height ? static final Animatable<double> _easeInTween = ? ? ? CurveTween(curve: Curves.easeIn); ? AnimationController _controller; ? Animation<double> _heightFactor; ? bool _isExpanded; ? @override ? void initState() { ? ? super.initState(); ? ? //初始化控制器以及出事?tīng)顟B(tài) ? ? _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; ? ? ? ? }); ? ? ? } ? ? ? //保存頁(yè)面數(shù)據(jù) ? ? ? PageStorage.of(context)?.writeState(context, _isExpanded); ? ? }); ? ? //回調(diào)展開(kāi)事件 ? ? 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) { ? ? //執(zhí)行以下對(duì)應(yīng)的Tap事件 ? ? _handleTap(); ? ? final bool closed = !_isExpanded && _controller.isDismissed; ? ? return AnimatedBuilder( ? ? ? animation: _controller.view, ? ? ? builder: _buildChildren, ? ? ? child: closed ? null : Column(children: widget.children), ? ? ); ? } }
原理其實(shí)很簡(jiǎn)單,就是根據(jù)字段_isExpanded 來(lái)控制折疊和展開(kāi),內(nèi)部使用動(dòng)畫實(shí)現(xiàn)對(duì)height的控制
Flutter 目前生態(tài)資源還是很缺乏,很多需要自定義,一般根據(jù)系統(tǒng)相關(guān)的控件做修改,是最好的
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android獲取手機(jī)系統(tǒng)版本等信息的方法
這篇文章主要介紹了Android獲取手機(jī)系統(tǒng)版本等信息的方法,涉及Android獲取手機(jī)版本中各種常見(jiàn)信息的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04Android性能優(yōu)化之plt?hook與native線程監(jiān)控詳解
這篇文章主要為大家介紹了Android性能優(yōu)化之plt?hook與native線程監(jiān)控詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09Android Viewpager實(shí)現(xiàn)無(wú)限循環(huán)輪播圖
這篇文章主要為大家詳細(xì)介紹了Android Viewpager實(shí)現(xiàn)無(wú)限循環(huán)輪播圖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-11-11Android開(kāi)發(fā)App啟動(dòng)流程與消息機(jī)制詳解
這篇文章主要為大家介紹了Android開(kāi)發(fā)App啟動(dòng)流程與消息機(jī)制詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08詳解flutter如何實(shí)現(xiàn)局部導(dǎo)航管理
這篇文章主要為大家介紹了詳解flutter如何實(shí)現(xiàn)局部導(dǎo)航管理示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01Android開(kāi)發(fā)使用自定義View將圓角矩形繪制在Canvas上的方法
這篇文章主要介紹了Android開(kāi)發(fā)使用自定義View將圓角矩形繪制在Canvas上的方法,結(jié)合實(shí)例形式分析了Android自定義view繪制圓角矩形的相關(guān)方法與使用技巧,需要的朋友可以參考下2017-10-10Android ListView在Fragment中的使用示例詳解
這篇文章主要介紹了Android ListView在Fragment中的使用,因?yàn)楣ぷ饕恢痹谟胢vvm框架,因此這篇文章是基于mvvm框架寫的,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09Android實(shí)現(xiàn)3D推拉門式滑動(dòng)菜單源碼解析
這篇文章主要為大家詳細(xì)解析了Android實(shí)現(xiàn)3D推拉門式滑動(dòng)菜單源碼以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。2017-11-11結(jié)合Windows窗口深入分析Android窗口的實(shí)現(xiàn)
在Android中,窗口是一個(gè)基本的圖形用戶界面元素,它提供了一個(gè)屏幕區(qū)域來(lái)放置應(yīng)用程序的用戶界面元素。窗口可以是全屏的,也可以是一個(gè)小的對(duì)話框。每個(gè)窗口都有一個(gè)特定的主題和樣式,可以根據(jù)應(yīng)用程序的需求進(jìn)行自定義2023-04-04