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://juejin.im/post/5d089d2bf265da1bb564fa84