AnimatedSize 裁剪小部件

Question

我正在创建底部导航栏。当应用程序启动时，默认选择的导航选项卡会扩展，如 gif 中所示。

问题是当 AnimatedSize 启动动画时，边框被切断。因此，容器的 border-radius 看起来不太好。我不认为我正在裁剪视图。我错过了什么？

AnimatedSize(
  curve: Curves.ease,
  child: new Container(
    padding: EdgeInsets.symmetric(vertical: _topPadding),
    alignment: Alignment.center,
    child: Container(
      width: _width,
      height: _height,
      decoration: BoxDecoration(
          color: _service.settings.color,
          border: Border.all(color: Colors.red, width: 5),
          borderRadius: BorderRadius.all(Radius.circular(5)),
          boxShadow: [BoxShadow(offset: Offset(0, 3), blurRadius: 6, color: const Color(0xff000000).withOpacity(0.16))]),
    ),
  ),
  vsync: this,
  duration: _service.animationDuration,
),

main.dart

return Container(
  height: kBottomNavigationBarHeight,
  child: Stack(
    children: [
      if (service.isBottomSlideVisible) SlideBox(),
      Container(
        alignment: Alignment.center,
        child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: service.items
                .map((e) => NavItem(
                      e,
                      onTab: () {
                        var index = service.items.indexOf(e);
                        service.setSelected(index);
                        _updateIndex(index);
                      },
                    ))
                .toList()),
      )
    ],
  ),
);

Answer 1

1. 用 Container 包裹 AnimatedSize 并为 Container.

添加边框

2. 将 Container 的高度设置为 _height.

3. 为 Container.

添加上边距 _topPadding

4.AnimatedPositioned的left参数减去Container的边框宽度使内容居中

5. 去除内部边框 Container.

AnimatedPositioned(
            left: _posX - _sizeFactor - 5,
            child: Container(
              height: _height,
              margin: EdgeInsets.only(top: _topPadding),
              decoration: BoxDecoration(
                  color: _service.settings.color,
                  border: Border.all(color: Colors.red, width: 5),
                  borderRadius: BorderRadius.all(Radius.circular(5)),
                  boxShadow: _service.settings.shadow ??
                      [
                        BoxShadow(
                            offset: Offset(0, 3),
                            blurRadius: 6,
                            color: const Color(0xff000000).withOpacity(0.16))
                      ]),
              child: AnimatedSize(
                curve: Curves.ease,
                child: new Container(
                  padding: EdgeInsets.symmetric(vertical: _topPadding),
                  alignment: Alignment.center,
                  child: Container(
                    width: _width,
                    height: _height,
                  ),
                ),
                vsync: this,
                duration: _service.animationDuration,
              ),
            ),
            duration: _service.animationDuration,
            curve: Curves.easeOutCirc,
          ),

结果：

AnimatedSize 裁剪小部件

AnimatedSize clipping the widget

flutter

flutter-layout

flutter-animation