[英]Align item center inside the flutter Stack widget
我正在尝试创建如下小部件。 它适用于 2 位数。 (如图像“20”所示)但如果数字增加,则显示的标签不会居中。 它被移到右侧。 如第二张图片所示。 我该如何解决? 我尝试了很多方法,我尝试的方法都失败了。 请在下面查看我尝试过的代码。
Stack(
children: <Widget>[
Container(
width: profileImageSize,
height: profileImageSize,
decoration: new BoxDecoration(
shape: BoxShape.circle,
image: new DecorationImage(
fit: BoxFit.fill,
image: new NetworkImage("$profileImageUrl"),
),
),
),
(this.countFollowers != null)
? Padding(
padding: const EdgeInsets.only(left: 15.0, top: 30.0),
child: SpriiFollowerCountLabel(countFollowers),
)
: Container(),
],
);
Stack(alignment: AlignmentDirectional.center,children: <Widget>[])
代替
Padding(
padding: const EdgeInsets.only(left: 15.0, top: 30.0),
child: SpriiFollowerCountLabel(countFollowers),
)
用
Container(
alignment: Alignment.center,
padding: const EdgeInsets.only(top: 30.0),
child: SpriiFollowerCountLabel(countFollowers),
)
但我建议使用
Container(
width: profileImageSize,
height: profileImageSize,
decoration: new BoxDecoration(
shape: BoxShape.circle,
image: new DecorationImage(
fit: BoxFit.fill,
image: new NetworkImage("$profileImageUrl"),
),
),
child: Stack(
children: <Widget>[
Container(
alignment: Alignment.bottomCenter,
child: SpriiFollowerCountLabel(countFollowers),
)
],
),
),
我通过使用容器的转换属性解决了这个问题并删除了 Stack 小部件并将其替换为列
Column(
children: <Widget>[
Container(
width: profileImageSize,
height: profileImageSize,
decoration: new BoxDecoration(
shape: BoxShape.circle,
image: new DecorationImage(
fit: BoxFit.fill,
image: new NetworkImage("$profileImageUrl"),
),
),
),
(this.countFollowers != null)
? Container(
child: SpriiFollowerCountLabel(countFollowers),
transform: Matrix4.translationValues(0.0, -10.0, 0.0),
)
: Container(),
],
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.