Flutter -隐藏其中一个Column子级时，动画显示高度变化

gv8xihay 于 2023-01-06 发布在 Flutter

关注(0)|答案(2)|浏览(179)

我在Column小部件中有两个子部件，第一个是简单的Container，第二个是Expanded小部件。用户可以隐藏/显示第一个Container。在这种情况下，我需要在两个小部件上应用动画，因此第一个容器的高度应该自动降低，第二个小部件应该逐渐增加，直到填满整个空间。
我测试使用AnimatedContainer，但是它需要指定前后的高度，我不知道这一点。
有什么建议吗？

class ViewerPage extends StatefulWidget {
  @override
  _ViewerPageState createState() => _ViewerPageState();
}

class _ViewerPageState extends State<ViewerPage> {
  bool visible = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Example"),
      ),
      bottomNavigationBar: BottomAppBar(
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            IconButton(
              icon: Icon(Icons.show_chart),
              onPressed: () {
                setState(() {
                  visible = !visible;
                });
              },
            ),
          ],
        ),
      ),
      body: Container(
        child: Column(
          children: <Widget>[
            Visibility(
              visible: visible,
              child: Container(
                  child: Text("This Container can be visible or hidden"),
                  color: Colors.red),
            ),
            Expanded(
              child: ListView.builder(
                itemBuilder: (context, index) => Text("Item ..."),
                itemCount: 20,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

flutter

来源：https://stackoverflow.com/questions/61034770/flutter-animate-change-on-height-when-hide-one-of-column-children

2条答案

按热度按时间

nfs0ujit1#

很简单，使用动画大小，并删除可见性。动画大小计算自己的高度。所以你不需要知道大小之前和之后。
只需要为动态高度传递null，为不可见传递0。AnimatedSize将负责动画

height: visible? null : 0.0,

我把你的代码改了一点。2它现在工作正常了。

import 'package:flutter/material.dart';

    class Test extends StatefulWidget {
      @override
      _TestState createState() => _TestState();
    }

    class _TestState extends State<Test> with SingleTickerProviderStateMixin{

      bool visible = true;
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("Example"),
          ),
          bottomNavigationBar: BottomAppBar(
            child: Row(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
                IconButton(
                  icon: Icon(Icons.show_chart),
                  onPressed: () {
                    setState(() {
                      visible = !visible;
                    });
                  },
                ),
              ],
            ),
          ),
          body: Container(
            child: Column(
              children: <Widget>[
                AnimatedSize(
                  duration: Duration(seconds: 1),
                  child: Container(
                    height: visible? null : 0.0,
                    child: Text("This Container can be visible or hidden"),
                    color: Colors.red
                  ), 
                  vsync: this,
                ),
                Expanded(
                  child: ListView.builder(
                    itemBuilder: (context, index) => Text("Item ..."),
                    itemCount: 20,
                  ),
                ),
              ],
            ),
          ),
        );
      }
    }

赞(0）回复(0）举报 2023-01-06

uyhoqukh2#

从技术上讲，公认的解决方案没有隐藏项目，它只是折叠到零高度，我遇到了一个情况，即当ListView兄弟向下滑动时，会出现一个小部件（图标）。
我推荐以下解决方案：

AnimatedSize(
duration: const Duration(milliseconds: 500),
child: visible ? Container( child: Text("This Container can be visible or hidden"), color: Colors.red) : const SizedBox(),),

赞(0）回复(0）举报 2023-01-06

我来回答

Flutter -隐藏其中一个Column子级时，动画显示高度变化

2条答案

相关问题

热门标签

最新问答