Animation 在底部工作表中实现转换

我正试图实现以下设计，但我似乎无法按照我应该做的方式进行思考：p

我正在考虑使用通过

showModalBottomSheet

功能显示的

BottomSheet

，但我不知道如何实现过渡（我会使用

FadeTransition

进行淡入效果，但不知道高度变化效果）

到目前为止，我得到的是：

导入“包装：颤振/材料.省道”；
导入“dart:math”；
类设置扩展了StatefulWidget{
最后一个孩子；
const设置（this.child）；
@凌驾
_SetupState createState（）=>\u SetupState（）；
}
类MyCurve扩展了曲线{
@凌驾
双变换（双t）=>-pow（t，2）+1；
}
类_SetupState使用SingleTickerProviderStateMixin扩展状态{
动画控制器_控制器；
动画不透明；
int i=0；
@凌驾
void initState（）{
super.initState（）；
_控制器=
AnimationController（vsync:this，duration:duration（毫秒：500））；
不透明成像=弯曲成像(
父对象：Tween（开始：1，结束：0）。设置动画（_控制器），
曲线：曲线。easeInOutExpo）；
}
@凌驾
小部件构建（构建上下文）{
返回底片(
enableDrag:false，
海拔：16，
背景颜色：颜色。透明，
生成器：（）=>容器(
保证金：全部（8），
装饰：盒子装饰（边框半径：边框半径。圆形（16）），
儿童：材料(
形状：圆形矩形边框(
边界半径：边界半径。圆形（16）），
孩子：FadeTransition(
不透明度：不透明图像，
孩子：填充(
填充：边缘设置。全部（16），
子：列(
mainAxisSize:mainAxisSize.min，
儿童：[
小朋友，
容器(
身高：10，
),
升起的按钮(
子项：文本（“下一个”），
已按下：（）{
_controller.forward（）然后（（）{
_controller.reverse（）；
});
},
)
],
)),
)),
),
一旦丢失：（）{}，
);
}
}

---

正如您所看到的，我只是让淡入淡出动画工作，但没有完成任何布线或高度转换。

因为底部导航表的高度基于其内容的高度，所以您可以轻松地为其设置动画

用于将容器放在底板内，使其达到所需的高度。通过创建一个动画控制器，将“开始”和“结束”设置为您希望的高度值，并设置状态，可以设置高度本身的动画。然后用不透明度动画开始动画

containerHeight = CurvedAnimation(
    parent: Tween<double>(begin: 350, end: 200).animate(_controller)..addListener(() {setState(() {});});,
    curve: Curves.easeInOutExpo);

containerHeight=曲线动画(
父：Tween（开始：350，结束：200）。动画（_controller）…addListener（（）{setState（（）{}）；}）；，
曲线：曲线。easeInOutExpo）；

---

这应该可以解决问题。

如果可以使用

AnimatedContainer

和

AnimateCrossFade

实现同样的效果，那么为什么要把事情复杂化呢

仅供参考

    class BS extends StatefulWidget {
      _BS createState() => _BS();
    }

    class _BS extends State<BS> {
      bool _showSecond = false;

      @override
      Widget build(BuildContext context) {
        return BottomSheet(
          onClosing: () {},
          builder: (BuildContext context) => AnimatedContainer(
            margin: EdgeInsets.all(20),
            decoration: BoxDecoration(
                color: Colors.white, borderRadius: BorderRadius.circular(30)),
            child: AnimatedCrossFade(
                firstChild: Container(
                  constraints: BoxConstraints.expand(
                      height: MediaQuery.of(context).size.height - 200),
//remove constraint and add your widget hierarchy as a child for first view
                  padding: EdgeInsets.all(20),
                  child: Align(
                    alignment: Alignment.bottomCenter,
                    child: RaisedButton(
                      onPressed: () => setState(() => _showSecond = true),
                      padding: EdgeInsets.all(15),
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10)),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          Text("Suivant"),
                        ],
                      ),
                    ),
                  ),
                ),
                secondChild: Container(
                  constraints: BoxConstraints.expand(
                      height: MediaQuery.of(context).size.height / 3),
//remove constraint and add your widget hierarchy as a child for second view
                  padding: EdgeInsets.all(20),
                  child: Align(
                    alignment: Alignment.bottomCenter,
                    child: RaisedButton(
                      onPressed: () => setState(() => _showSecond = false),
                      color: Colors.green,
                      padding: EdgeInsets.all(15),
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10)),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          Text("ok"),
                        ],
                      ),
                    ),
                  ),
                ),
                crossFadeState: _showSecond
                    ? CrossFadeState.showSecond
                    : CrossFadeState.showFirst,
                duration: Duration(milliseconds: 400)),
            duration: Duration(milliseconds: 400),
          ),
        );
      }
    }

类BS扩展StatefulWidget{
_BS createState（）=>U BS（）；
}
类扩展了状态{
bool_showSecond=假；
@凌驾
小部件构建（构建上下文）{
返回底片(
一旦丢失：（）{}，
生成器：（BuildContext上下文）=>AnimatedContainer(
保证金：全部（20），
装饰：盒子装饰(
颜色：颜色。白色，边界半径：边界半径。圆形（30）），
子对象：动画交叉淡入淡出(
第一个孩子：集装箱(
约束：BoxConstraints.expand(
高度：MediaQuery.of（context.size.height-200），
//删除约束并将小部件层次结构作为第一个视图的子级添加
填充：边缘设置。全部（20），
子对象：对齐(
对齐：对齐.bottomCenter，
孩子：升起按钮(
按下时：（）=>设置状态（（）=>\u showsond=true），
填充：边缘设置。全部（15），
形状：圆形矩形边框(
边界半径：边界半径。圆形（10）），
孩子：排(
mainAxisAlignment:mainAxisAlignment.center，
儿童：[
文本（“Suivant”），
],
),
),
),
),
第二个孩子：集装箱(
约束：BoxConstraints.expand(
高度：MediaQuery.of（context.size.height/3），
//删除约束并将小部件层次结构添加为第二个视图的子级
填充：边缘设置。全部（20），
子对象：对齐(
对齐：对齐.bottomCenter，
孩子：升起按钮(
按下时：（）=>setState（（）=>\u showsond=false），
颜色：颜色。绿色，
填充：边缘设置。全部（15），
形状：圆形矩形边框(
边界半径：边界半径。圆形（10）），
孩子：排(
mainAxisAlignment:mainAxisAlignment.center，
儿童：[
文本（“ok”），
],
),
),
),
),