如何在堆栈中居中文本？答案

【问题标题】：How can I center Text in stack?如何在堆栈中居中文本？
【发布时间】：2022-01-22 10:15:09
【问题描述】：

我有一个 Stack 有两个孩子。一个图标和一个文本。 Icon 的高度大于文本，并指示 Stack 的高度。无论图标的大小如何，我都希望文本在堆栈中居中。

Stack(
    children: [
      Align(
        alignment: Alignment.topRight,
        child: GestureDetector(
          behavior: HitTestBehavior.opaque,
          onTap: () => Navigator.of(context).pop(),
          child: Padding(padding: EdgeInsets.all(4), child: Icon(Icons.close)),
        ),
      ),
      Center(
        child: Text(
          widget.title,
          textAlign: TextAlign.center,
        ),
      ),
    ],
  ),

在当前布局下，无论图标有多大，文本总是在堆栈的顶部中心绘制。我该如何纠正这个问题？

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

使用Stack 的alignment: Alignment.center 对齐children。

'alignment' 的默认值为 AlignmentDirectional.topStart。

Stack(
  alignment: Alignment.center,
  children: [
    const Text(
      "widget.title",
      textAlign: TextAlign.center,
    ),
    Align(
      alignment: Alignment.topRight,
      child: GestureDetector(
        behavior: HitTestBehavior.opaque,
        onTap: () => Navigator.of(context).pop(),
        child: Padding(
            padding: EdgeInsets.all(4), child: Icon(Icons.close)),
      ),
    ),
  ],
),

更多关于Stack widget

【讨论】：

【解决方案2】：

使用Stack 小部件时，您必须使用Positioned 小部件来定位子级。您可以参考下面的代码，并记住last 小部件将overlap previous 小部件Stack's children。前任。第一个将与第二个重叠

Stack(
  children: [
    Positioned(
      left: 0,
      right: 0,
      top: 0,
      bottom: 0,
      child: GestureDetector(
        behavior: HitTestBehavior.opaque,
        onTap: () => Navigator.of(context).pop(),
        child:
            Padding(padding: EdgeInsets.all(4), child: Icon(Icons.close)),
      ),
    ),
    Center(
      child: Text(
        widget.title,
        textAlign: TextAlign.center,
      ),
    ),
  ],
)

【讨论】：

我想定位到 Text 而不是 GestureDetector
实际上，如果您使用 Center 小部件，它将中心对齐它的子元素到堆栈的中心，因此您不需要使用 Positioned 来居中。
你可以检查更新的答案。