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;
                  });
                },
              ),
            ],
          )),
    );
  }

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

1 个答案: