[英]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.