[英]AnimatedSize clipping the widget
I'm creating a bottom navigation bar.我正在创建一个底部导航栏。 When the app launches, the default selected navigation tab extends as seen in the gif.
当应用程序启动时,默认选择的导航选项卡会扩展,如 gif 中所示。
The issue is when AnimatedSize
starts the animate, borders cuts off.问题是当
AnimatedSize
开始动画时,边框会被切断。 Therefore, the container's border-radius doesn't look good.因此,容器的 border-radius 看起来不太好。 I don't think I'm clipping the view.
我不认为我正在裁剪视图。 What am I missing?
我错过了什么?
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主要.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()),
)
],
),
);
1. Wrap the AnimatedSize
with a Container
and add borders to the Container
. 1.用
Container
包裹AnimatedSize
并向Container
添加边框。
2. Set height of the Container
to _height
. 2.将
Container
的高度设置为_height
。
3. Add a top margin of _topPadding
to the Container
. 3.将
_topPadding
的上边距添加到Container
。
4. Subtract the border width of the Container
from the left
parameter of the AnimatedPositioned
to center the content. 4 、
AnimatedPositioned
的left
参数减去Container
的边框宽度,让内容居中。
5. Remove the borders from the inner 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,
),
Result:结果:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.