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 目前生態資源仍是很缺少，不少須要自定義，通常根據系統相關的控件作修改，是最好的