Question

我正在尝试实现AnimatedContaner，而我的想法来自this video
但是动画不像他们在视频中所说的那样起作用。知道我的代码有什么问题吗？
下面添加了代码，请支持解决此问题。

import 'package:flutter/material.dart';

class BillCard extends StatefulWidget {
  @override
  _BillCardState createState() => _BillCardState();
}

class _BillCardState extends State<BillCard> {
  //AnimationController _controller;
  String body = "";
  bool expanded = false;
  @override
  void initState() {
    for (int i = 0; i < 100; i++) {
      body += " body body";
    }
    // _controller = AnimationController(vsync: this);
    super.initState();
  }

  @override
  void dispose() {
    //  _controller.dispose();
    super.dispose();
  }

  expand() {
    setState(() {
      expanded = !expanded;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Card(
        child: Column(children: <Widget>[
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                Icon(Icons.calendar_today),
                Text("July 2,2019")
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                Text("Rs 500"),
                GestureDetector(
                  onTap: () {
                    expand();
                  },
                  child: Container(child: Icon(Icons.keyboard_arrow_up)),
                )
              ],
            )
          ],
        ),
      ),
          expanded
              ? AnimatedContainer(
            duration: Duration(seconds: 10),
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: <Widget>[
                            Icon(Icons.insert_drive_file),
                            Text("Transalation ID")
                          ],
                        ),
                        Row(
                          children: <Widget>[
                            Text("First Name Last Name"),
                          ],
                        )
                      ],
                    ),
                  ),
                )
              : AnimatedContainer(
            duration: Duration(seconds: 10),
                  color: expanded ? Colors.blueAccent : Colors.redAccent,
                  child: Text(body),
                )
    ]));
  }
}

Answer 1

由于没有明确的高度，您应该使用AnimatedSize。这是解决问题的代码段：

将class _BillCardState extends State<BillCard>更改为class _BillCardState extends State<BillCard> with SingleTickerProviderStateMixin
将expanded ? ...更改为此：

AnimatedSize(
          vsync: this,
          duration: Duration(seconds: 10),
          child: expanded
              ? Container(
                  padding: const EdgeInsets.all(8.0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Icon(Icons.insert_drive_file),
                          Text("Transalation ID")
                        ],
                      ),
                      Row(
                        children: <Widget>[
                          Text("First Name Last Name"),
                        ],
                      )
                    ],
                  ),
                )
              : Container(
                  color: expanded ? Colors.blueAccent : Colors.redAccent,
                  child: Text(body),
                ),
        )

Flutter AnimatedContainer没有动画显示为正常情况

1 个答案: