如何将 Stack 小部件对齐到屏幕中心？

Question

我遇到了无法将小部件与屏幕中央对齐的问题。我将所有内容都放在一列中，我尝试设置列的对齐方式 (mainAxisAlignment、crossAxisAlignment) 并尝试通过 Alignment 小部件将其对齐到中心 - 它没有帮助.我知道原因是我使用了 Stack 小部件。但是你怎么能让这个小部件仍然对齐到屏幕的中心呢？

正文

return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 8),
      child: Column(
        children: [
          const SizedBox(height: 121),
          StarWidget(rating: rating),
          AvatarWidget(),
        ],
      ),
    );

AvatarWidget

return SizedBox(
      height: 32,
      child: Stack(
        children: List.generate(
          userPhoto.length > 3 ? 3 : userPhoto.length,
          (index) => Positioned(
              left: 22.0 *
                  ((userPhoto.length > 3 ? 3 : userPhoto.length) - index),
              child: index == 0 && userPhoto.length > 3
                  ? Container(
                      width: 32,
                      height: 32,
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        border: Border.all(
                            color: constants.Colors.blackLight, width: 0.7),
                      ),
                      alignment: Alignment.center,
                      child: Container(
                        width: 30,
                        height: 30,
                        decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          color: constants.Colors.greyXDark.withOpacity(0.5),
                        ),
                        alignment: Alignment.center,
                        child: Text('+${userPhoto.length - 2}',
                            style: constants.Styles.smallerHeavyTextStyleWhite),
                      ),
                    )
                  : Container(
                      width: 32,
                      height: 32,
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        border: Border.all(
                            color: constants.Colors.blackLight, width: 0.7),
                      ),
                      alignment: Alignment.center,
                      child: Container(
                        width: 30,
                        height: 30,
                        decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          image: DecorationImage(
                              image: AssetImage(userPhoto[index])),
                        ),
                      ),
                    )),
        ),
      ),
    );

Answer 1

您可以使用此函数获取屏幕宽度并为您的小部件留出边距像这样 :

double getScreenWidth(BuildContext context) {
  return MediaQuery.of(context).size.width;
}
@override
  
  Widget build(BuildContext context) {
    return Container(
margin: const EdgeInsets.only(left: getScreenWidth - 100),

      padding: const EdgeInsets.symmetric(horizontal: 8),
      child: Column(
        children: [
          const SizedBox(height: 121),
          StarWidget(rating: rating),
          AvatarWidget(),
        ],
      ),
    );

希望对你有所帮助

Answer 2

这样试试

return SizedBox.expand(
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                const SizedBox(height: 121),
                StarWidget(rating: rating),
                AvatarWidget(),
              ],
            ),
          ),
        );

Answer 3

虽然我们知道项目的大小，但我们可以计算宽度并在 SizedBox(width:renderItemCount*singleChildWidth)

上提供

SizedBox(
  height: 32,
  width: (itemCount > 3 ? 3 : itemCount) * 32, //inner container width
  child: Stack(

Answer 4

像下面这样尝试“Alignment.center”。

Stack(
                alignment: Alignment.center,
                children: [])

如何将 Stack 小部件对齐到屏幕中心？

How to align the Stack widget to the center of the screen?

flutter

dart

flutter-layout