堆wrap_content里面的所有Widget？

Posted 2023-02-23

【中文标题】堆wrap_content里面的所有Widget？

【英文标题】：Stack wrap_content all the Widget inside?

【发布时间】：2020-11-14 22:40:24

【问题描述】：

我有一个这样的 Widget 树：

  Stack(
    children: [
      Text(
        '-',
        style: title,
      ),
      Positioned.fill(
        child: Center(
          child: Text(
            'FT',
            style: normal,
          ),
        ),
      )
    ],
  ),

我希望堆栈将宽度和高度都包装到其中的所有小部件，如下所示：

但它看起来像这样：

堆栈从未填充的小部件中获取宽度和高度。 如果我将两个 Widget 都包装在 Positioned.fill 中，则布局为空。 有人知道怎么修这个东西吗？非常感谢。

【参考方案1】：

您可以使用Stack 小部件的alignment 属性

试试这个

     Stack(
            alignment: Alignment.center,
            children: [

              Text(
                'GAME',
                style: TextStyle(color: Colors.blue),
              ),
              Text(
                '  -  ',
                style: TextStyle(color: Colors.red),
              ),
            ],
          ),

输出

【参考方案2】：

根据docs：

堆栈本身的大小以包含所有未定位的子项

因此，基于此，我们需要使用非定位子级，尽管它仍然可以与Align 或类似Center 的等价物对齐。

Stack(
  children: [
    Center(
      child: Text(
        '  -  ',
      ),
    ),
    Center(
      child: Text(
        'FT',
      ),
    ),
  ],
);