Flutter中如何让Expanded内ListView的ListTile居中对齐？

你的问题核心在于：ListView默认会占满父容器的宽度，ListTile也会自动拉伸填充ListView的宽度，导致列表项内容左对齐，外层的Center无法生效。

解决步骤 #

修改GeneratorPage中ListView.builder的itemBuilder，用Align组件包裹每个ListTile，设置水平居中：

// class GeneratorPage
return Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Expanded(
        child: ListView.builder(
          itemCount: appState.allPair.length,
          shrinkWrap: true,
          itemBuilder: (context, index) {
            // 用Align包裹ListTile，实现水平居中
            return Align(
              alignment: Alignment.center,
              child: ListTile(
                leading: appState.isFavorite(index)
                    ? const Icon(Icons.favorite)
                    : null,
                title: Text(appState.allPair[index].asPascalCase),
              ),
            );
          },
        ),
      ),
      BigCard(pair: pair),
      const SizedBox(height: 10),
      Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          ElevatedButton.icon(
            onPressed: () {
              appState.toggleFavorite();
            },
            icon: Icon(icon),
            label: const Text('Like'),
          ),
          const SizedBox(width: 10),
          ElevatedButton(
            onPressed: () {
              appState.next();
            },
            child: const Text('Next'),
          ),
        ],
      ),
      const Spacer(),
    ],
  ),
);

原理说明 #

Align组件会约束其子组件（这里是ListTile）不拉伸填充父容器，而是按照指定的alignment属性对齐，从而让整个列表项（包括爱心图标和文字）水平居中，和你想要的参考效果一致。

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