Question

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

问题是AnimatedSize开始动画时，边框被切断。因此，容器的边界半径看起来不好。我认为我并没有削减观点。我想念什么？

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。。用AnimatedSize包裹Container，并在Container上添加边框。

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

3。。将_topPadding的上边距添加到Container。

4。。从Container的{{1}}参数中减去left的边框宽度以使内容居中。

5。。从内部AnimatedPositioned删除边框。

Container

结果：

AnimatedSize裁剪小部件

1 个答案: