flutter中展开收缩文本组件

实现组件的展开或收缩效果

import 'package:flutter/material.dart';


class YyVisibility extends StatefulWidget {
  final Widget child;
  final bool? show;

  ///显示展开按钮
  final bool showBtn;
  const YyVisibility(
      {super.key, required this.child, this.show, this.showBtn = true});

  @override
  State<YyVisibility> createState() => _YyVisibilityState();
}

class _YyVisibilityState extends State<YyVisibility>
    with SingleTickerProviderStateMixin {
  late AnimationController parent;
  bool visible = false;

  @override
  void initState() {
    visible = widget.show ?? false;
    parent = AnimationController(
        value: visible ? 1 : 0,
        vsync: this,
        duration: const Duration(milliseconds: 100));

    super.initState();
  }

  @override
  void dispose() {
    parent.dispose();
    super.dispose();
  }

  Widget _builderBtn() {
    return GestureDetector(
        onTap: () {
          setState(() => visible = !visible);
          parent.forward(from: 0);
        },
        child: Row(
          children: [
            Text("点击${visible ? "收起" : "展开"}信息",
                style: TextStyle(color: Colors.blue, fontSize: 14)),
            Icon(visible ? Icons.keyboard_arrow_up : Icons.keyboard_arrow_down,
                size: 16)
          ],
        ));
  }

  @override
  Widget build(BuildContext context) {
    return Visibility(
        replacement: widget.showBtn ? _builderBtn() : SizedBox.shrink(),
        child: widget.showBtn
            ? Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
                SizeTransition(
                    sizeFactor:
                        CurvedAnimation(parent: parent, curve: Curves.linear),
                    child: widget.child),
                _builderBtn()
              ])
            : widget.child,
        visible: visible);
  }
}