使用 ListView 内部的 Align 左/右对齐 Widget答案

【问题标题】：Using Align inside of ListView to align Widgets left/right使用 ListView 内部的 Align 左/右对齐 Widget
【发布时间】：2021-09-03 15:43:45
【问题描述】：

我的应用程序显示用户的个人资料。我希望添加的一个功能是允许用户“喜欢”个人资料。为此，我使用Listview 来显示所有个人资料内容。

问题是在添加LikeButton 时，它会居中，这是意料之中的。我想把它移到（上）右边。

Align 看起来像是一个更可行和优雅的解决方案，可以做这样的事情（见下文），但我无法让Align 工作（它仍然居中）。

ListView(
  children: [
    Row(
      mainAxisAlignment: MainAxisAlignment.end,
      children: [LikeButton()],
    ),
    // rest of profile information

将Container 与width: double.infinity 一起使用也不适用于Align - 它仍然居中。

Container(
  width: double.infinity,
  child: Align(
    alignment: Alignment.topRight,
    child: LikeButton(),
  ),
)

使用Row 是我唯一的选择还是有更好的方法？

【问题讨论】：

为 LikeButton 小部件添加代码
@JonathanIxcayau 见pub.dev/packages/like_button#how-to-use-it
尝试在具有自定义宽度的容器内添加 LikeButton，然后将小部件对齐为父项
@CybeX 如果您觉得有帮助，请接受我的回答

标签： android flutter flutter-layout flutter-listview

【解决方案1】：

由于 LikeButton 是一个 Row 或 Column 它自己，你不能这样对齐，

你可以使用它的属性来对齐它

ListView(
        children: [
            LikeButton(
              mainAxisAlignment: MainAxisAlignment.end,
              crossAxisAlignment: CrossAxisAlignment.start,
            )
          ],
)

或者只是将它包裹在一个 SizedBox 中并对齐该框

Container(
          width: double.infinity,
          height: 500,
          alignment: Alignment.topRight,
          child: SizedBox(
                width: 100,
                height: 100,
                child: LikeButton()),
)

行采用其子级的大小，因此您的第一个代码不会垂直对齐
你没有在你的容器代码中给出高度，所以通过 topRight 对齐它是没有意义的

【讨论】：

【解决方案2】：

您可以将Stack 和LikeButton() 放在Container(child:Row()) 上，并通过为topRight 参数赋值将其定位到右上角。

【讨论】：