Question

我无法在我的应用程序中模拟“颜色倒计时”。基本上，我希望内部容器（从顶部到底部）缓慢收缩，而外部容器（带有边框）的宽度和高度保持相同。现在，我的代码调整了两个容器，而不仅仅是最里面的一个。

Google的文档和教程对这种小众案例没有太多要说的。这有可能吗？

下面是没有设置外部容器的宽度和高度的外观 Good trial

这是设置宽度和高度时的外观。 Bad trial

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:scoped_model/scoped_model.dart';
import 'package:timely_flutter/scoped_models/model.dart';

class Timer extends StatefulWidget {
  State<StatefulWidget> createState() => _Timer();
}

class _Timer extends State<Timer> {
  _Timer();

  MainModel model;
  var width = 600;
  var height = 500;
  var margin = EdgeInsets.only(bottom: 10.0, right: 10.0, left: 10.0);
  var backColor = Colors.black;
  var text = Text("Hello", style: TextStyle(color: Colors.white),);
  bool selected = false;

  Widget build(BuildContext context) {
    return ScopedModelDescendant<MainModel>(
      builder: (BuildContext context, Widget child, model) {
        return GestureDetector(
            onTap: () {
              print("clicked");
              setState(() {
                selected = !selected;
                print(selected);
              });
            },
            child: Container(
              margin: const EdgeInsets.all(5),
              padding: const EdgeInsets.all(5),
//              height: height.toDouble(),
//              width: width.toDouble(),
              decoration: BoxDecoration(
                border: Border.all(color: Colors.black)
              ),
            child: new AnimatedContainer(
              height: selected ? height / 4: height / 1.5 ,
              width: width /1.5, // this will give you flexible width not fixed width
              margin: margin, // variable
              color: backColor,// variable
              duration: Duration(seconds: 4),
              curve: Curves.fastOutSlowIn,
              child: new Column(
                children: <Widget>[
                  new Expanded(
                    flex: 1,
                    child: new Container(
                      alignment: Alignment.topCenter,
                      child: text, //varaible above
                    ),
                  ),
                  new Expanded(
                    flex: 1,
                    child: new Container(
                      alignment: Alignment.bottomCenter,
                      child: text, //variable above
                    ),
                  ),
                ],
              ),
            )
        )
      },
    );
  }
}

Answer 1

为固定的width设置height和Container，以使其不会调整大小以适应其child。

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:scoped_model/scoped_model.dart';
import 'package:timely_flutter/scoped_models/model.dart';

class Timer extends StatefulWidget {
  State<StatefulWidget> createState() => _Timer();
}

class _Timer extends State<Timer> {
  _Timer();

  MainModel model;
  var width = 600;
  var height = 500;
  var margin = EdgeInsets.only(bottom: 10.0, right: 10.0, left: 10.0);
  var backColor = Colors.black;
  var text = Text("Hello", style: TextStyle(color: Colors.white),);
  bool selected = false;

  Widget build(BuildContext context) {
    return ScopedModelDescendant<MainModel>(
      builder: (BuildContext context, Widget child, model) {
        return GestureDetector(
            onTap: () {
              print("clicked");
              setState(() {
                selected = !selected;
                print(selected);
              });
            },
            child: Container(
              width: width,
              height: height,
              margin: const EdgeInsets.all(5),
              padding: const EdgeInsets.all(5),
//              height: height.toDouble(),
//              width: width.toDouble(),
              decoration: BoxDecoration(
                border: Border.all(color: Colors.black)
              ),
            child: new AnimatedContainer(
              height: selected ? height / 4: height / 1.5 ,
              width: width /1.5, // this will give you flexible width not fixed width
              margin: margin, // variable
              color: backColor,// variable
              duration: Duration(seconds: 4),
              curve: Curves.fastOutSlowIn,
              child: new Column(
                children: <Widget>[
                  new Expanded(
                    flex: 1,
                    child: new Container(
                      alignment: Alignment.topCenter,
                      child: text, //varaible above
                    ),
                  ),
                  new Expanded(
                    flex: 1,
                    child: new Container(
                      alignment: Alignment.bottomCenter,
                      child: text, //variable above
                    ),
                  ),
                ],
              ),
            )
        )
      },
    );
  }
}

有没有办法在固定宽度的Container中设置animationContainer的动画？

1 个答案: