flutter - 在 Row 小部件中垂直居中某些元素

Question

我有一个 ListView 项目的以下小部件树：

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Expanded(
      child: Align(
        child: Assets.images.select.image(height: 20, width: 20),
      ),
    ),
    Expanded(
      flex: 4,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
            padding: const EdgeInsets.only(right: 16),
            child: Text(
              food.name,
              style: GoogleFonts.cabin(
                  color: Theme.of(context).primaryColor,
                  fontSize: FontSize.medium.size,
                  fontWeight: FontWeight.w700),
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 4),
            child: Text(
              "100 g",
              style: GoogleFonts.cabin(
                  color: Color(0xFF777777),
                  fontSize: FontSize.small.size,
                  fontWeight: FontWeight.w500),
            ),
          ),
        ],
      ),
    ),
    Expanded(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Align(
            alignment: Alignment.centerRight,
            child: Text(
              "${food.carbohydratesPerGram} g / HC",
              style: GoogleFonts.cabin(
                  color: Theme.of(context).primaryColor,
                  fontSize: FontSize.medium.size,
                  fontWeight: FontWeight.w400),
            ),
          ),
        ],
      ),
    )
  ],
)

但结果是这样的：

我尝试将球放在“mainAxisAlignment”设置为“mainAxisAlignment.center”的列中

我怎样才能让左边的球在行中垂直居中？

标签： flutterdartflutter-layout

Answer 1

您可以使用 crossAxisAlignment。

当你在一个行元素中时，主要是水平轴，交叉是垂直轴

当您在列中时，主要是垂直轴，交叉是水平轴。

因此，在您的 Row 元素到垂直轴的中心元素中，您需要使用

crossAxisAlignment: CrossAxisAlignment.center