Flutter中ListTile嵌套Stack无法将图片垂直居中的求助

问题原因 #

• ListTile的leading容器未设置对齐方式，其高度由title和subtitle撑开，内部65x65的Stack无法自动垂直居中。
• Stack默认对齐为左上角，导致图片未基于中心定位。

修复方案 #

• 给leading的Container添加alignment: Alignment.center，确保Stack在整个leading区域垂直水平居中。
• 给Stack设置alignment: Alignment.center，保证内部图片和状态图标都以中心为基准对齐（若状态图标需固定位置，可单独用Positioned调整，不影响图片居中效果）。

修改后的完整代码 #

Widget build(BuildContext context) {
  final dogTypes = dog.type!.map((type) => type.name).toList();
  final teams = dog.teams.map((team) => team.name).toList();
  return GestureDetector(
    onTap: () => viewDogProfile(dog, index),
    child: SizedBox(
      width: double.infinity,
      child: Card(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(14),
        ),
        margin: const EdgeInsets.only(top: 25),
        child: Padding(
          padding: const EdgeInsets.only(bottom: 8),
          child: ListTile(
            leading: Container(
              width: 65,
              height: 65,
              alignment: Alignment.center, // 新增：让Stack在容器内居中
              decoration: const BoxDecoration(
                shape: BoxShape.circle,
              ),
              child: Stack(
                alignment: Alignment.center, // 新增：让Stack内元素居中
                children: [
                  CachedNetworkImage(
                    imageUrl: dog.image.url,
                    imageBuilder: (context, imageProvider) => Container(
                      height: 65,
                      width: 65,
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        image: DecorationImage(
                          image: imageProvider,
                          fit: BoxFit.cover,
                        ),
                        border: Border.all(
                          color: accentColor,
                          width: 2,
                        ),
                        boxShadow: [
                          BoxShadow(
                            color: Colors.black87.withOpacity(0.6),
                            spreadRadius: 0.8,
                            blurRadius: 2,
                            offset: const Offset(1, 1),
                          ),
                        ],
                      ),
                    ),
                    placeholder: (context, url) =>
                        const CircularProgressIndicator(
                      color: primaryColor,
                    ),
                    errorWidget: (context, url, error) =>
                        const Icon(Icons.error),
                  ),
                  DogStatusIcon(
                    dogStatus: dog.status,
                  ),
                ],
              ),
            ),
            title: Row(
              children: [
                Flexible(
                  child: Padding(
                    padding: const EdgeInsets.only(top: 8),
                    child: Text(
                      dog.name,
                      style: AppStyles.dogProfileCardHeaderTextStyle,
                      maxLines: 1,
                      softWrap: true,
                      overflow: TextOverflow.ellipsis,
                    ),
                  ),
                ),
              ],
            ),
            subtitle: Padding(
              padding: const EdgeInsets.only(bottom: 5),
              child: Column(
                children: [
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      const Text(
                        'Teams: ',
                        style: AppStyles.dogProfileCardSubHeaderTextStyle,
                      ),
                      Flexible(
                        child: Text(
                          teams
                              .toString()
                              .replaceAll('[', '')
                              .replaceAll(']', ''),
                          style:
                              AppStyles.dogProfileCardSubHeaderDataTextStyle,
                          maxLines: 1,
                          softWrap: false,
                          overflow: TextOverflow.ellipsis,
                        ),
                      ),
                    ],
                  ),
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      const Text(
                        'Breed: ',
                        style: AppStyles.dogProfileCardSubHeaderTextStyle,
                      ),
                      Flexible(
                        child: Text(
                          dog.breed.name,
                          style:
                              AppStyles.dogProfileCardSubHeaderDataTextStyle,
                          maxLines: 1,
                          softWrap: true,
                          overflow: TextOverflow.ellipsis,
                        ),
                      ),
                    ],
                  ),
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      const Text(
                        'Type: ',
                        style: AppStyles.dogProfileCardSubHeaderTextStyle,
                      ),
                      Flexible(
                        child: Text(
                          dogTypes
                              .toString()
                              .replaceAll('[', '')
                              .replaceAll(']', ''),
                          style:
                              AppStyles.dogProfileCardSubHeaderDataTextStyle,
                          maxLines: 1,
                          softWrap: false,
                          overflow: TextOverflow.ellipsis,
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
            trailing: Padding(
              padding: const EdgeInsets.only(top: 10),
              child: IconButton(
                icon: const Icon(
                  Icons.keyboard_arrow_right_rounded,
                  color: accentColor,
                  size: 28,
                ),
                onPressed: () {
                  viewDogProfile(dog, index);
                },
              ),
            ),
          ),
        ),
      ),
    ),
  );
}

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