Flutter：如何将Card内数字居中并将播放按钮置于右下角

问题原因 #

你当前用ListTile的方式无法实现需求，因为ListTile的布局逻辑是leading-title-trailing三分结构，title的宽度会被trailing挤压，即使设置textAlign: TextAlign.center，也只是在title的有限区域内居中，无法占据整个Card的宽度实现全局居中。

解决方案 #

替换ListTile，改用Stack或Row+Expanded的组合布局，直接控制组件位置：

方案1：Stack布局（推荐，定位更灵活）

利用Stack可以叠加组件的特性，将数字文本居中放置，播放按钮定位在右下角：

@override
Widget build(BuildContext context) {
  return Card(
    color: const Color(0x665050f1),
    child: SizedBox(
      // 可根据需求设置Card的固定高度
      height: 120,
      child: Stack(
        children: [
          // 居中显示数字
          Center(
            child: Text(
              widget.index.toString(),
              style: const TextStyle(
                fontSize: 40.0,
                color: Colors.white,
                fontWeight: FontWeight.w700,
              ),
            ),
          ),
          // 右下角放置播放按钮
          Align(
            alignment: Alignment.bottomRight,
            child: Padding(
              // 给按钮加内边距，避免贴边
              padding: const EdgeInsets.only(right: 10, bottom: 10),
              child: IconButton(
                icon: Icon(
                  Icons.play_arrow,
                  size: 50.0,
                  color: _playing
                      ? Theme.of(context).colorScheme.primary
                      : Theme.of(context).colorScheme.onBackground.withOpacity(.5),
                ),
                onPressed: _playing ? null : _play,
              ),
            ),
          ),
        ],
      ),
    ),
  );
}

方案2：Row+Expanded布局

通过Expanded让文本区域占据Card的剩余宽度，再结合对齐逻辑定位按钮：

@override
Widget build(BuildContext context) {
  return Card(
    color: const Color(0x665050f1),
    child: SizedBox(
      height: 120,
      child: Row(
        children: [
          // 让文本区域占据所有剩余宽度并居中
          Expanded(
            child: Center(
              child: Text(
                widget.index.toString(),
                style: const TextStyle(
                  fontSize: 40.0,
                  color: Colors.white,
                  fontWeight: FontWeight.w700,
                ),
              ),
            ),
          ),
          // 右下角按钮（借助Column让按钮垂直居底）
          Padding(
            padding: const EdgeInsets.only(right: 10, bottom: 10),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                IconButton(
                  icon: Icon(
                    Icons.play_arrow,
                    size: 50.0,
                    color: _playing
                        ? Theme.of(context).colorScheme.primary
                        : Theme.of(context).colorScheme.onBackground.withOpacity(.5),
                  ),
                  onPressed: _playing ? null : _play,
                ),
              ],
            ),
          ),
        ],
      ),
    ),
  );
}

说明 #

• 两种方案都能实现数字在Card全局居中、播放按钮固定在右下角的效果；
• 可根据实际需求调整SizedBox的高度，或移除SizedBox让Card自适应内容；
• 加入Padding避免按钮紧贴Card边缘，提升视觉体验。

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