Flutter问题：ListTile的trailing组件中CircleAvatar无法居中

问题根源 #

你写的代码里，trailing的Container虽然设置了height: double.infinity，但没加对齐属性，默认是左上角对齐，所以CircleAvatar就贴在ListTile的顶部了，没法垂直居中。

修复代码 #

只需要给Container加一行alignment: Alignment.center就行，或者直接用Center组件包裹CircleAvatar，两种方案都能解决：

static Widget buildRecordCard(MyCard card, BuildContext context) {
    var dateFormat = DateFormat('MM/dd/yyyy');
    return Column(
      children: [
        ListTile(
            shape:
                RoundedRectangleBorder(borderRadius: BorderRadius.circular(30)),
            tileColor: Colors.white,
            title: Text(
              "Score: " + card.score!,
              style: const TextStyle(fontSize: 38),
            ),
            subtitle: Column(children: [
              const Align(
                alignment: Alignment.centerLeft,
                child: Text(
                  "Personal Record",
                  style: TextStyle(fontSize: 22),
                ),
              ),
              const SizedBox(height: 6),
              Align(
                alignment: Alignment.centerLeft,
                child: Text(
                  dateFormat.format(card.createdOn.toDate()),
                  style: const TextStyle(fontSize: 18),
                ),
              ),
              const SizedBox(height: 6),
            ]),
            // 方案1：给Container添加对齐属性（保留原有的宽约束）
            trailing: Container(
              constraints: const BoxConstraints(minWidth: 70.0, maxWidth: 80),
              height: double.infinity,
              alignment: Alignment.center, // 新增这行，直接让子组件居中
              child: CircleAvatar(
                  radius: 35,
                  backgroundColor: Colors.transparent,
                  child: Image.asset("assets/" + card.subCategory + ".png")),
            )
            // 方案2：用Center直接包裹（如果不需要固定宽约束，更简洁）
            // trailing: Center(
            //   child: CircleAvatar(
            //       radius: 35,
            //       backgroundColor: Colors.transparent,
            //       child: Image.asset("assets/" + card.subCategory + ".png")),
            // ),
            ),
        const SizedBox(height: 18),
      ],
    );
  }

为啥之前的尝试没用？ #

你之前用Column加mainAxisAlignment: MainAxisAlignment.center没效果，是因为Column本身没占满trailing的垂直高度，得给Column也设height: double.infinity才会生效，但显然用Container加对齐或者Center组件更直接高效。

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