flutter ListView - 如何同时左右对齐？

Posted 2023-02-23

【中文标题】flutter ListView - 如何同时左右对齐？

【英文标题】：flutter ListView - How do I align left and right at the same time?

【发布时间】：2021-09-28 05:27:03

【问题描述】：

我有一个项目列表视图。我想在左边放一个名字，在右边放一个值。无法找到一种方法来使它们都与边缘对齐：

        ...
        ListView(
          shrinkWrap: true,
          padding: EdgeInsets.all(15.0),
          children: <Widget>[
            Text(
              'Asset 0 <-  -> Balance',
              style: TextStyle(
                fontSize: 18.0,
                color: Colors.grey[850],
              ),
            ),
            Text(
              'Asset 1 <-  -> Balance',
              style: TextStyle(
                fontSize: 18.0,
                color: Colors.grey[850],
              ),
            ),
            Text(
              'Asset 2 <-  -> Balance',
              style: TextStyle(
                fontSize: 18.0,
                color: Colors.grey[850],
              ),
            ),
          ]
        ),
        ...

（我想要右边的余额和左边的资产名称）

是否有专门为此目的的特殊小部件？我希望它像 ListView 一样可滚动，当然我希望它一起滚动。如果该行有一个称为边缘的对齐选项，可以将行中的两个项目分别对齐到每一侧，那就太酷了。但我认为不存在。这个问题的常见解决方案是什么？

【问题讨论】：

使用行小部件并使用交叉轴对齐方式对齐其子项

我发现了这个，这可能会帮助其他人看到同样的问题：***.com/questions/50365770/…

【参考方案1】：

当Row 带有多个小部件时，另一种方法是在Row children 之间添加Spacer()

示例代码

Row(children: [
      Text(
        'Asset 0',
        style: TextStyle(
          fontSize: 18.0,
          color: Colors.grey[850],
        ),
      ),
      Spacer(),
      Text(
        'Balance',
        style: TextStyle(
          fontSize: 18.0,
          color: Colors.grey[850],
        ),
      ),
    ])

【参考方案2】：

使用这个：

row(
children:[
mainAxisAlignment:MainAxisAlignment.spaceBetween;
Text(
              'Asset 0',
              style: TextStyle(
                fontSize: 18.0,
                color: Colors.grey[850],
              ),
            ),
Text(
              'Balance',
              style: TextStyle(
                fontSize: 18.0,
                color: Colors.grey[850],
              ),
            ),
]
)