如何在flutter中按Y轴将行中的元素与两列对齐

Question

我在

Row

中有一个居中的

Card

，在那里有两个

Column

。如何按 Y 轴对齐两列中图标的元素（屏幕截图中的虚线）？

这是一个代码：

Expanded(
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    children: [
      Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          SvgPicture.asset(
            "assets/weight_24dp.svg",
            semanticsLabel: 'Thin',
            width: 50,
            height: 50,
          ),
          Text(
            '10',
            style: Theme.of(context).textTheme.bodyLarge,
          ),
        ],
      ),
      Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          // Text('-'),
          Icon(
            Icons.repeat,
            size: 50,
          ),
          Text(
            '12',
            style: Theme.of(context).textTheme.bodyLarge,
          ),
          Text('+')
        ],
      ),
    ],
  ),
),

添加

Text('+')

会破坏对齐...

我尝试使用对齐小部件，但它没有帮助我。当然，我可以将 SizedBox 添加到第一个小部件，它将解决我的问题，但我认为这将是一个糟糕的解决方案，我尝试找到正确且干净的解决方案。

Answer 1

1. 用柱包裹。
2. 添加到您的顶行 -

   crossAxisAlignment: CrossAxisAlignment.start,

3. 不要使用扩展，而是使用行 -

   mainAxisSize: MainAxisSize.max,

示例：

...Column(
      children: [
        Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          mainAxisSize: MainAxisSize.max,
          children: [...