Flutter ListView如何实现Column中CrossAxisAlignment.end的对齐效果？

在ListView里实现单个子Widget右对齐，核心是给需要对齐的组件套一层对齐容器，以下是几种简单可行的方案：

方案1：使用Align组件包裹TextButton #

直接用Align指定对齐方向，这是最直观的方式：

ListView(
  children: [
    const ListTile(title: Text('Title'), subtitle: Text('Subtitle')),
    const ListTile(title: Text('Title'), subtitle: Text('Subtitle')),
    const ListTile(title: Text('Title'), subtitle: Text('Subtitle')),
    // 用Align包裹，设置右对齐
    Align(
      alignment: Alignment.centerRight,
      child: TextButton(child: const Text('Tap me'), onPressed: (){}),
    ),
  ]
)

方案2：使用Row+Spacer组合 #

利用Spacer占据Row内的剩余空间，把按钮挤到右侧：

ListView(
  children: [
    const ListTile(title: Text('Title'), subtitle: Text('Subtitle')),
    const ListTile(title: Text('Title'), subtitle: Text('Subtitle')),
    const ListTile(title: Text('Title'), subtitle: Text('Subtitle')),
    Row(
      children: [
        const Spacer(), // 占据左侧所有剩余空间
        TextButton(child: const Text('Tap me'), onPressed: (){}),
      ],
    ),
  ]
)

方案3：使用Container设置宽度和对齐 #

给Container设置全屏宽度，再指定内部组件右对齐：

ListView(
  children: [
    const ListTile(title: Text('Title'), subtitle: Text('Subtitle')),
    const ListTile(title: Text('Title'), subtitle: Text('Subtitle')),
    const ListTile(title: Text('Title'), subtitle: Text('Subtitle')),
    Container(
      width: double.infinity, // 占满ListView的宽度
      alignment: Alignment.centerRight,
      child: TextButton(child: const Text('Tap me'), onPressed: (){}),
    ),
  ]
)

这三种方案都能实现你要的右对齐效果，选哪种看个人习惯，推荐方案1，最直接对应对齐需求。

内容的提问来源于stack exchange，提问作者Sparkringo