Flutter中如何实现ListView.builder列表项的顶部居中对齐？

你的问题核心在于ListView.builder默认会占满父组件的水平宽度，所以外层的Align(topCenter)无法让它真正居中——因为宽度已经和屏幕一致，看起来还是左对齐。同时你给每个ListTile套的Align(bottomCenter)是冗余的，反而可能干扰布局。

要实现列表整体顶部居中，只需两步：

• 限制ListView的水平宽度，让它仅适配内容（或设置一个合适的最大宽度），这样Align的居中才能生效
• 移除ListTile外层不必要的Align组件

修改后的代码如下：

Align(
  alignment: Alignment.topCenter,
  child: ConstrainedBox(
    // 限制列表最大宽度，可根据需求调整，比如设为屏幕宽度的80%
    constraints: BoxConstraints(
      maxWidth: MediaQuery.of(context).size.width * 0.8,
    ),
    child: ListView.builder(
      shrinkWrap: true,
      itemCount: widget.todoList.length,
      itemBuilder: (context, index) {
        return ListTile(
          leading: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.transparent,
                  elevation: 0,
                  shadowColor: Colors.transparent,
                ),
                onPressed: () {
                  setState(() {
                    widget.todoList[index].state = !widget.todoList[index].state;
                  });
                },
                child: widget.todoList[index].state == true
                    ? Ink(
                        decoration: ShapeDecoration(
                          color: Colors.green,
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(0),
                            side: const BorderSide(
                              color: Colors.black,
                              width: 2,
                            ),
                          ),
                        ),
                        child: const SizedBox(width: 16, height: 16),
                      )
                    : Ink(
                        decoration: ShapeDecoration(
                          color: Colors.grey,
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(0),
                            side: const BorderSide(
                              color: Colors.black,
                              width: 2,
                            ),
                          ),
                        ),
                        child: const SizedBox(width: 16, height: 16),
                      ),
              ),
            ],
          ),
          title: Text(
            widget.todoList[index].name,
            style: const TextStyle(fontWeight: FontWeight.bold),
          ),
        );
      },
    ),
  ),
)

关键改动说明： #

1. 添加ConstrainedBox：通过maxWidth限制列表的水平宽度，这样ListView不再占满全屏，Align的topCenter就能让整个列表在屏幕顶部居中显示。你可以根据UI需求调整maxWidth的数值，比如固定宽度300，或者按屏幕比例设置。
2. 移除ListTile外层的Align：ListTile本身会填充父组件的宽度，这个Align不仅没用，还可能导致列表项布局异常，直接移除即可。
3. 保留shrinkWrap: true：确保ListView的高度仅适配列表项的总高度，这样它会紧贴顶部，不会拉伸到屏幕底部。

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