Flutter：我可以在一个 Row 中使用不同类型的 crossAxisAlignment 吗？

Question

我有一个带有动态高度项的 ListView。每个项目都是一个包含 3 个元素的行：文本、列、列。 ListView 看起来像这样：

这是我的项目小部件的代码：

class ItemWidget extends StatelessWidget {
  final ItemViewModel model;

  const ItemWidget({Key key, @required this.model}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        SizedBox(width: 16),
        Text(
          model.typeLabel,
        ),
        SizedBox(width: 8),
        Expanded(
          flex: 6,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              SizedBox(height: 4),
              Text(
                'Volume:',
                textAlign: TextAlign.end,
              ),
              SizedBox(height: 2),
              Text(
                model.volume,
                textAlign: TextAlign.end,
              ),
              SizedBox(height: 4),
              Text(
                'Filled:',
                textAlign: TextAlign.end,
              ),
              SizedBox(height: 2),
              Text(
                model.filled,
                textAlign: TextAlign.end,
              ),
              SizedBox(height: 4)
            ],
          ),
        ),
        SizedBox(width: 16),
        Expanded(
            flex: 6,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                SizedBox(height: 4),
                Text(
                  'Price:',
                  textAlign: TextAlign.end,
                ),
                SizedBox(height: 2),
                Text(
                  model.price,
                  textAlign: TextAlign.end,
                ),
                SizedBox(height: 4),
                Text(
                  'Total:',
                  textAlign: TextAlign.end,
                ),
                SizedBox(height: 2),
                Text(
                  model.total,
                  textAlign: TextAlign.end,
                ),
                SizedBox(height: 4),
                Text(
                  'Fee:',
                  textAlign: TextAlign.end,
                ),
                SizedBox(height: 2),
                Text(
                  model.fee,
                  textAlign: TextAlign.end,
                ),
                SizedBox(height: 4),
              ],
            )),
        SizedBox(width: 16),
      ],
    );
  }
}

我希望我的 Column 小部件始终保持顶部对齐，就像当行的 crossAxisAlignment 为 CrossAxisAlignment.start 时一样。同时 Text 应该居中，就像现在当 Row 的 crossAxisAlignment 为 CrossAxisAlignment.center 时一样。这是我想要的：

我怎样才能做到这一点？

感谢您的帮助。

Answer 1

我是否理解正确：您有包含 3 个元素的行，您希望第一个元素居中，其他两个元素顶部对齐？

我认为您的主要误解是列不会自动拉伸到整个高度，因此它们的内容可能是顶部对齐的，但它们本身在行内是居中对齐的。

This 是一个很好的主题指南，理解它非常重要。

您或许可以解决直接用Align() 小部件包裹中间元素的问题。

Answer 2

答案：行小部件不能为其子级使用不同的 crossAxisAlignment 类型。

但我为我的布局找到了另一种解决方案，在根目录中使用 Stack 小部件。这是工作代码：

class ItemWidget extends StatelessWidget {
  final ItemViewModel model;

  const ItemWidget({Key key, @required this.model}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(children: [
      Positioned.fill(
        child: Container(
          padding: EdgeInsets.only(left: 16),
          alignment: Alignment.centerLeft,
          child: Text(model.typeLabel),
        ),
      ),
      Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SizedBox(width: 24),
          Expanded(
            flex: 6,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                SizedBox(height: 4),
                Text(
                  'Volume:',
                  textAlign: TextAlign.end,
                ),
                SizedBox(height: 2),
                Text(
                  model.volume,
                  textAlign: TextAlign.end,
                ),
                SizedBox(height: 4),
                Text(
                  'Filled:',
                  textAlign: TextAlign.end,
                ),
                SizedBox(height: 2),
                Text(
                  model.filled,
                  textAlign: TextAlign.end,
                ),
                SizedBox(height: 4)
              ],
            ),
          ),
          SizedBox(width: 16),
          Expanded(
              flex: 6,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.end,
                children: [
                  SizedBox(height: 4),
                  Text(
                    'Price:',
                    textAlign: TextAlign.end,
                  ),
                  SizedBox(height: 2),
                  Text(
                    model.price,
                    textAlign: TextAlign.end,
                  ),
                  SizedBox(height: 4),
                  Text(
                    'Total:',
                    textAlign: TextAlign.end,
                  ),
                  SizedBox(height: 2),
                  Text(
                    model.total,
                    textAlign: TextAlign.end,
                  ),
                  SizedBox(height: 4),
                  Text(
                    'Fee:',
                    textAlign: TextAlign.end,
                  ),
                  SizedBox(height: 2),
                  Text(
                    model.fee,
                    textAlign: TextAlign.end,
                  ),
                  SizedBox(height: 4),
                ],
              )),
          SizedBox(width: 16),
        ],
      )
    ]);
  }
}

结果是：

Answer 3

不确定这是否可能。如果布局如图所示简单，我会简单地添加一些空白行，以便中间和右列具有相同的长度。肮脏的解决方法，但总比没有好;-)