在颤动中与堆栈对齐

Posted 2023-02-23

【中文标题】在颤动中与堆栈对齐

【英文标题】：Alignment with Stack in flutter

【发布时间】：2020-03-17 03:50:43

【问题描述】：

项目

嗨， 我试图在 Flutter 的 Stack 中对齐一些小部件。我的最终结果是这样的：

我知道这可以通过 Row 轻松实现，但我想为两个孩子的位置设置动画，所以我不得不使用堆栈。

我的问题很简单：

示例代码

return Container(
  child: Stack(
    children: <Widget>[
      Align(
        alignment: Alignment.centerLeft,
        child: _buildSign(),
      ),
      Align(
        alignment: Alignment.centerRight,
        child: _buildSign(),
      ),
    ],
  ),
);

这不会像我预期的那样呈现。无论我在 alignment 字段中输入什么内容：Alignment.centerRight 和 Alignment.centerLeft 都会始终将孩子放在左侧中间。

只有给包装容器一个固定的宽度才能解决问题。现在我明白为什么会发生这种情况了，但是如果我想让容器和他的孩子一样大怎么办？标签是动态文本，所以他的宽度对我来说是不可预测的

有什么想法吗？

谢谢

【问题讨论】：

"I know that this can be easily achieved with a Row but I want to animate the position ot the two children so I'm forced to use stack." 所以请改用Flow 小部件（点击演示影片查看其工作原理）

【参考方案1】：

Hy justAnotherOverflowUser，

在您的情况下，您必须在Stack Widget 中使用Positioned Widget， 它会给你你想要的。

例如：

Positioned(
  left: 20.0,
  child: Icon(
    Icons.monetization_on, 
    size: 36.0, 
    color: const Color.fromRGBO(218, 165, 32, 1.0)
  )
)

【讨论】：

我正在考虑这个问题。但是我的动画必须交换两个元素的位置。加号必须从左侧开始动画：20 到 20 结尾。据我所知，除非您知道小部件的宽度，否则这是不可能的

正确答案在这里***.com/questions/55054721/…

当您使用 rtl 和 ltr 时，AlignmentDirectional 会派上用场，因此使用 Positioned 并不是一个很好的解决方案

【参考方案2】：

更灵活的对齐方式是将Align 与Positioned.fill 包装起来 原来的答案贴在这里Flutter: bottom center widget in stack

return Container(
  child: Stack(
    children: <Widget>[
      Positioned.fill(
       child: Align(
        alignment: Alignment.centerLeft,
        child: _buildSign(),
      ),),
      Positioned.fill(
       child:Align(
        alignment: Alignment.centerRight,
        child: _buildSign(),
      ),),
    ],
  ),
);