flutter - 如何为列表中的特定容器设置动画

Question

我想要制作动画并将容器高度从 60 更改为 120，例如，当用户按下图标时，更改容器内容(展开时图像填充容器的一半)。

有什么想法可以做吗？简单的

对我来说不起作用

setState(() {
  height = 120; 
 });

我的代码:

Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blueAccent,
      ),
      body: ListView.builder(
        itemCount: 20,
        itemBuilder: (BuildContext context, int index) {
          return _buildCard(context, index);
        },
      ),
    );
  }

  Widget _buildCard(BuildContext context, int index) {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 12.0, vertical: 8.0),
      child: Container(
          color: Colors.teal,
          height: 60.0,
          width: 60.0,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              ClipRRect(
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(12.0),
                  bottomLeft: Radius.circular(12.0),
                ),
                child: Image.network(
                  "https://cdn.pixabay.com/photo/2019/08/29/06/24/elephants-4438284__340.jpg",
                  fit: BoxFit.cover,
                ),
              ),
              IconButton(
                icon: Icon(Icons.ac_unit),
                onPressed: () {

                },
              ),
            ],
          )),
    );
  }

Answer 1

使用AnimatedContainer() -

代码:

double _height = 60.0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blueAccent,
      ),
      floatingActionButton: FloatingActionButton(
          child: Icon(Icons.edit),
          onPressed: () {
            setState(() {
              _height = 120;
            });
          }),
      body: ListView.builder(
        itemCount: 20,
        itemBuilder: (BuildContext context, int index) {
          return _buildCard(context, index);
        },
      ),
    );
  }

  Widget _buildCard(BuildContext context, int index) {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 12.0, vertical: 8.0),
      child: AnimatedContainer(
          duration: Duration(seconds: 1),
          curve: Curves.fastLinearToSlowEaseIn,
          color: Colors.teal,
          height: _height,
          width: 60.0,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              ClipRRect(
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(12.0),
                  bottomLeft: Radius.circular(12.0),
                ),
                child: Image.network(
                  "https://cdn.pixabay.com/photo/2019/08/29/06/24/elephants-4438284__340.jpg",
                  fit: BoxFit.fitHeight,
                  //  height: 60,
                ),
              ),
              IconButton(
                icon: Icon(Icons.ac_unit),
                onPressed: () {},
              ),
            ],
          )),
    );
  }

更新:仅对特定容器进行动画处理:

List _height = List.generate(20, (i) => 60.0).toList();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blueAccent,
      ),
//      floatingActionButton: FloatingActionButton(
//          child: Icon(Icons.edit),
//          onPressed: () {
////            setState(() {
////              _height = 120;
////            });
//          }),
      body: ListView.builder(
        itemCount: 20,
        itemBuilder: (BuildContext context, int index) {
          return _buildCard(context, index);
        },
      ),
    );
  }

  Widget _buildCard(BuildContext context, int index) {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 12.0, vertical: 8.0),
      child: AnimatedContainer(
          duration: Duration(seconds: 1),
          curve: Curves.fastLinearToSlowEaseIn,
          color: Colors.teal,
          height: _height[index],
          width: 60.0,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              ClipRRect(
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(12.0),
                  bottomLeft: Radius.circular(12.0),
                ),
                child: Image.network(
                  "https://cdn.pixabay.com/photo/2019/08/29/06/24/elephants-4438284__340.jpg",
                  fit: BoxFit.fitHeight,
                  //  height: 60,
                ),
              ),
              IconButton(
                icon: Icon(Icons.ac_unit),
                onPressed: () {
                  setState(() {
                    _height[index] == 60
                        ? _height[index] = 120.0
                        : _height[index] = 60.0;
                  });
                },
              ),
            ],
          )),
    );
  }