繁体   English   中英

在颤振堆栈小部件内对齐项目中心

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

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM