Flutter 如何显示容器展开和折叠元素的？答案

【问题标题】：Flutter How to show container expand and collapse element's?Flutter 如何显示容器展开和折叠元素的？
【发布时间】：2021-12-26 12:02:59
【问题描述】：

我想展示一个具有展开和折叠效果的容器元素。

不与AppBar结合。

这是我的container 代码：

InkWell(
      onTap: () {
        if (_height == 200) {
          setState(() {
            _height = 100.0;
          });
        } else {
          _updateState();
        }
      },
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 550),
        height: _height,
        width: Get.width,
        decoration: BoxDecoration(
          color: Colors.white,
          boxShadow: [
            BoxShadow(
              color: Colors.black.withOpacity(0.2),
              spreadRadius: 2,
              blurRadius: 10,
              offset: const Offset(0, 3),
            ),
          ],
          borderRadius: const BorderRadius.only(
            bottomLeft: Radius.circular(20),
            bottomRight: Radius.circular(20),
          ),
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
           Text("0.0"),
           Text("0.0"),
           //Widget1(),
           //Widget2(),
           //Widget3(),
          ],
        ),
      ),
    );

我希望它在我单击它时显示我的另一个 Widgets。

我还尝试了ExpansionPanelList 和ExpansionTile，但它们的工作方式并不像我想要的那样。我也不想使用 SliverAppBar。

【问题讨论】：

标签： flutter containers

【解决方案1】：

这个例子可能对你有所帮助：

class _MyHomePageState extends State<MyHomePage> {
  double _height = 100;

  void onClick() {
    if (_height == 300) {
      setState(() {
        _height = 100.0;
      });
    } else {
      setState(() {
        _height = 300;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    final List<Widget> _widgets = [
      Container(
        width: MediaQuery.of(context).size.width,
        height: 100,
        decoration: BoxDecoration(
          boxShadow: [
            BoxShadow(
              color: Colors.black.withOpacity(0.2),
              spreadRadius: 2,
              blurRadius: 10,
              offset: const Offset(0, 3),
            ),
          ],
          borderRadius: const BorderRadius.only(
            bottomLeft: Radius.circular(20),
            bottomRight: Radius.circular(20),
          ),
        ),
      ),
      Container(
        width: MediaQuery.of(context).size.width,
        height: 100,
        color: Colors.grey,
      ),
      Container(
        width: MediaQuery.of(context).size.width,
        height: 100,
        decoration: const BoxDecoration(
          boxShadow: [
            BoxShadow(
              color: Colors.red,
            ),
          ],
          borderRadius: BorderRadius.only(
            bottomLeft: Radius.circular(20),
            bottomRight: Radius.circular(20),
          ),
        ),
      )
    ];

    return Scaffold(
      backgroundColor: Colors.blueAccent,
      body: Column(
        children: [
          InkWell(
            onTap: () {
              onClick();
            },
            child: AnimatedContainer(
              duration: const Duration(milliseconds: 550),
              height: _height,
              width: MediaQuery.of(context).size.width,
              decoration: BoxDecoration(
                color: Colors.white,
                boxShadow: [
                  BoxShadow(
                    color: Colors.black.withOpacity(0.2),
                    spreadRadius: 2,
                    blurRadius: 10,
                    offset: const Offset(0, 3),
                  ),
                ],
                borderRadius: const BorderRadius.only(
                  bottomLeft: Radius.circular(20),
                  bottomRight: Radius.circular(20),
                ),
              ),
              child: SingleChildScrollView(
                physics: const NeverScrollableScrollPhysics(),
                child: Column(
                  children: _widgets,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

结果：

【讨论】：

经过几次重新编码后，它工作了。我接受你的回答。非常感谢。

【解决方案2】：

你可以像这样在你的列中添加条件

children: [
           Text("0.0"),
           Text("0.0"),
           if(_height == 200)
           Widget1(),
           if(_height == 200)
           Widget2(),
           if(_height == 200)
           Widget3(),
          ],

你也可以使用 AnimatedSwitcher https://api.flutter.dev/flutter/widgets/AnimatedSwitcher-class.html

【讨论】：

如果孩子对于父母的身高来说太大，它会返回溢出错误。还是谢谢你。