如何將Stack小部件與螢屏中心對齊？

遇到一個問題，我無法將小部件與螢屏中心對齊。我將所有內容都放在一列中，我嘗試設定列（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])),
                        ),
                      ),
                    )),
        ),
      ),
    );

uj5u.com熱心網友回復：

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

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

我希望這會幫助你

uj5u.com熱心網友回復：

像這樣試試

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

uj5u.com熱心網友回復：

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

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

uj5u.com熱心網友回復：

試試下面的“Alignment.center”。

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

標籤：扑 镖 颤振布局

上一篇：IconButtononPressed不作業|InkWellonTap不作業|撲

下一篇：墨天輪訪談 | 百度云邱學達：GaiaDB如何解決云上場景的業務需求？