Question

如何在添加的容器出现后立即对其进行动画处理？（高度从0到containerHeight的动画）

下面是说明我的问题的代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Home(),
  ));
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

List<Widget> widgetList = [Container()];

class _HomeState extends State<Home> {
  TextEditingController controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animated container'),
        backgroundColor: Colors.blue,
      ),
      body: Container(
        alignment: Alignment.topCenter,
        child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Expanded(
                child: Stack(
                  fit: StackFit.expand,
                  children: <Widget>[
                    Center(
                      child: Padding(
                        //shift to left
                        padding: const EdgeInsets.only(left: 55.0),
                        child: Row(
                          children: widgetList.toList(),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              FlatButton(
                child: Text(
                  'Add',
                  style: TextStyle(color: Colors.white),
                ),
                onPressed: () {
                  setState(() {
                    add(controller.text);
                  });
                },
                color: Colors.blue,
              ),
              FlatButton(
                child: Text(
                  'Clear',
                  style: TextStyle(color: Colors.white),
                ),
                onPressed: () {
                  setState(() {
                    widgetList.clear();
                  });
                },
                color: Colors.blue,
              ),
              TextField(
                onChanged: (text) {},
                textAlign: TextAlign.center,
                controller: controller,
                keyboardType: TextInputType.number,
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 25.0,
                    fontWeight: FontWeight.w300),
                decoration: InputDecoration(
                  hintStyle: TextStyle(
                      color: Colors.white, fontWeight: FontWeight.w300),
                  fillColor: Colors.blue,
                  filled: true,
                ),
              ),
            ]),
      ),
    );
  }
}

void add(String containerHeight) {
  widgetList.add(Padding(
      padding: const EdgeInsets.all(3.0),
      child: AnimatedContainer(
        decoration: BoxDecoration(
          color: Colors.blue,
          borderRadius: BorderRadius.circular(2.0),
        ),
        duration: Duration(milliseconds: 165),
        alignment: Alignment.center,
        //color: Colors.red,
        height: double.parse(containerHeight),
        width: 29.0,
        child: Text(
          containerHeight,
          style: TextStyle(
              color: Colors.white,
              fontWeight: FontWeight.w600,
              fontSize: containerHeight.length == 1
                  ? 19.0
                  : containerHeight.length == 2
                      ? 19.0
                      : containerHeight.length == 3
                          ? 16.0
                          : containerHeight.length == 4 ? 14.0 : 10.0),
        ),
      )));
}

Screenshot of the ui

您只需要在文本字段中输入容器的高度，然后按“添加”，那么容器将直接显示而没有动画，所以我的问题是如何制作动画，以使高度从0变为containerHeight？

我知道当窗口小部件已经在其中并且我们修改了它的高度时它可以工作，但是我不知道在那种情况下该怎么做（添加到列表中并直接显示它）。

谢谢。

Answer 1

尝试以下代码。它正在工作。

  import 'package:flutter/material.dart';
  import 'dart:async';

  void main() {
    runApp(MaterialApp(
      home: Home(),
    ));
  }

  class Home extends StatefulWidget {
    @override
    _HomeState createState() => _HomeState();
  }

  List<Widget> widgetList = [Container()];
  StreamController<String> animationStream = StreamController();


  class _HomeState extends State<Home> {
    TextEditingController controller = TextEditingController();

    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Animated container'),
          backgroundColor: Colors.blue,
        ),
        body: Container(
          alignment: Alignment.topCenter,
          child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                Expanded(
                  child: Stack(
                    fit: StackFit.expand,
                    children: <Widget>[
                      Center(
                        child: Padding(
                          //shift to left
                          padding: const EdgeInsets.only(left: 55.0),
                          child: Row(
                            children: widgetList.toList(),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                FlatButton(
                  child: Text(
                    'Add',
                    style: TextStyle(color: Colors.white),
                  ),
                  onPressed: () {
                    animationStream = StreamController();
                    setState(() {
                      add("0");

                      animationStream.sink.add(controller.text);
                    });
                  },
                  color: Colors.blue,
                ),
                FlatButton(
                  child: Text(
                    'Clear',
                    style: TextStyle(color: Colors.white),
                  ),
                  onPressed: () {
                    setState(() {
                      widgetList.clear();
                    });
                  },
                  color: Colors.blue,
                ),
                TextField(
                  onChanged: (text) {},
                  textAlign: TextAlign.center,
                  controller: controller,
                  keyboardType: TextInputType.number,
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 25.0,
                      fontWeight: FontWeight.w300),
                  decoration: InputDecoration(
                    hintStyle: TextStyle(
                        color: Colors.white, fontWeight: FontWeight.w300),
                    fillColor: Colors.blue,
                    filled: true,
                  ),
                ),
              ]),
        ),
      );
    }
  }

  void add(String containerHeight) {
    widgetList.add(new MyWidget());
  }

  class MyWidget extends StatelessWidget {
    const MyWidget({
      Key key,
    }) : super(key: key);

    @override
    Widget build(BuildContext context) {
      return StreamBuilder(
        stream: animationStream.stream,
        builder: (context, snapshot) {
          String _hight = "0";
          if (snapshot.hasData ) {

            _hight = snapshot.data;
            try { double.parse(_hight);} catch (e) { print('please enter a valid hight');_hight="0"; }
          }

            return Padding(
                padding: const EdgeInsets.all(3.0),
                child: AnimatedContainer(
                  decoration: BoxDecoration(
                    color: Colors.blue,
                    borderRadius: BorderRadius.circular(2.0),
                  ),
                  duration: Duration(milliseconds: 2165),
                  alignment: Alignment.center,
                  //color: Colors.red,
                  height: double.parse(_hight),
                  width: 29.0,
                  child: Text(
                    _hight,
                    style: TextStyle(
                        color: Colors.white,
                        fontWeight: FontWeight.w600,
                        fontSize: _hight.length == 1
                            ? 19.0
                            : _hight.length == 2
                                ? 19.0
                                : _hight.length == 3
                                    ? 16.0
                                    : _hight.length == 4 ? 14.0 : 10.0),
                  ),
                ));

        },
      );
    }
  }

将容器添加到小部件列表后立即对其进行动画处理（如图所示）

1 个答案: