如何將 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(),
        ],
      ),
    );

頭像小部件

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

雖然我們知道項目的大小，但我們可以計算寬度並提供SizedBox(width:renderItemCount*singleChildWidth)

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

Answer 2

您可以使用此功能獲取屏幕寬度並為您的小部件提供如下邊距：

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 3

像這樣試試

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 4

試試下面的“Alignment.center”。

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