Question

正如您将在下面的代码中看到的那样，我有2个变量，它们每个都根据扩展状态呈现其他内容，以了解容器是否已扩展。

当我按下按钮并展开容器时，由图像引起的RenderFlex错误暂时出现。

就像容器完全展开之前显示的图像而且无论如何，展开/未展开之间的过渡看起来都非常难看。

我尝试在图片上使用Hero动画，但效果不佳。

有什么建议可以解决这个错误？

 body: Container(
                child: ListView.builder(
                  itemCount: 2,
                  itemBuilder: (BuildContext context, int ,index) {
                        return _buildCards(context, index, model);
                      },
                    ),
                  ));

    Widget _buildCards(
          BuildContext context, int index, ConnectedModel model) {

        Data item = model.data.elementAt(index);

        var exAnimatedContainer = AnimatedContainer(
            curve: Curves.easeOut,
            duration: Duration(milliseconds: 500),
            color: Colors.white,
            height: item.expanded
                ? MediaQuery.of(context).size.height * 0.30
                : MediaQuery.of(context).size.height * 0.13,
            child: Column(
              children: <Widget>[
                Container(
                  height: MediaQuery.of(context).size.height * 0.2,
                  child: Image.network(
                    model.data[index].image,
                    width: double.infinity,
                    fit: BoxFit.cover,
                  ),
                ),
              ],
            ));
        var notExAnimatedContainer = AnimatedContainer(
          curve: Curves.easeOut,
          duration: Duration(milliseconds: 500),
          color: Colors.white,
          height: item.expanded
              ? MediaQuery.of(context).size.height * 0.30
              : MediaQuery.of(context).size.height * 0.13,
          child: Row(
            children: <Widget>[
              Container(
                width: MediaQuery.of(context).size.width * 0.2,
                height: MediaQuery.of(context).size.height * 0.13,
                child: Image.network(
                  model.data[index].image,
                  fit: BoxFit.cover,
                ),
              ),
            ],
          ),
        );
        return GestureDetector(
          onTap: () {
            print('pressed');
            setState(() {
              item.expanded = !item.expanded;
            });
          },
          child: Padding(
              padding: const EdgeInsets.all(15.0),
              child: item.expanded ? exAnimatedContainer : notExAnimatedContainer),
        );

  }

如何在状态之间建立动画

0 个答案: