Flutter中如何调整列表及内部图标的位置？

我正在开发Flutter页面，已编写EditNoteList和EditNote组件代码，当前列表显示效果如图所示，希望实现所有列表居中显示，且每个列表内的图标位于右侧的布局，请问该如何调整？

当前代码 #

EditNoteList组件 #

class EditNoteList extends StatelessWidget {
  final String child;
  final IconData icon;
  EditNoteList({required this.child, required this.icon});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Padding(
        padding: EdgeInsets.symmetric(vertical: 5.0, horizontal: 5.0),
        child: Stack(
          children: [
            Center(
              child: Container(
                height: 100,
                width: 400,
                color: Colors.cyan,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Center(
                        child: Text(
                      child,
                      style: TextStyle(fontSize: 16, fontFamily: 'Montserrat'),
                      textAlign: TextAlign.center,
                    )),
                    Row(
                      children: [
                        Icon(icon),
                      ],
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
}

EditNote页面组件 #

class EditNote extends StatelessWidget {
  final List _posts = [
    'List 1',
    'List 2',
    'List 3',
  ];
  final List<IconData> icons = [Icons.add, Icons.access_alarms, Icons.account_circle_outlined];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
              padding: const EdgeInsets.all(8.0),
              itemCount: _posts.length,
              itemBuilder: (context, index) {
                return EditNoteList(
                  icon: icons[index],
                  child: _posts[index],
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

当前显示效果 #

期望显示效果 #

期望：所有列表居中，每个列表内的图标位于右侧。

调整方案 #

修改EditNoteList组件的布局结构，核心是调整Row的对齐方式并简化冗余嵌套，具体代码如下：

方案1：文本左对齐，图标右对齐 #

class EditNoteList extends StatelessWidget {
  final String child;
  final IconData icon;
  EditNoteList({required this.child, required this.icon});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Padding(
        padding: EdgeInsets.symmetric(vertical: 5.0, horizontal: 5.0),
        // 限制容器最大宽度，适配不同屏幕
        child: ConstrainedBox(
          constraints: BoxConstraints(maxWidth: 400),
          child: Container(
            height: 100,
            width: double.infinity,
            color: Colors.cyan,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                // 文本左侧留间距，避免贴边
                Padding(
                  padding: EdgeInsets.only(left: 16),
                  child: Text(
                    child,
                    style: TextStyle(fontSize: 16, fontFamily: 'Montserrat'),
                  ),
                ),
                // 图标右侧留间距
                Padding(
                  padding: EdgeInsets.only(right: 16),
                  child: Icon(icon),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

方案2：文本居中，图标固定右对齐 #

如果希望文本在容器内居中，图标始终靠右侧，可使用以下布局：

class EditNoteList extends StatelessWidget {
  final String child;
  final IconData icon;
  EditNoteList({required this.child, required this.icon});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Padding(
        padding: EdgeInsets.symmetric(vertical: 5.0, horizontal: 5.0),
        child: ConstrainedBox(
          constraints: BoxConstraints(maxWidth: 400),
          child: Container(
            height: 100,
            width: double.infinity,
            color: Colors.cyan,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                // 文本占满剩余空间并居中
                Expanded(
                  child: Center(
                    child: Text(
                      child,
                      style: TextStyle(fontSize: 16, fontFamily: 'Montserrat'),
                    ),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.only(right: 16),
                  child: Icon(icon),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

关键修改说明： #

1. 移除冗余嵌套：删掉不必要的Stack和内层Center，避免布局层级混乱导致的对齐冲突
2. 容器宽度适配：用ConstrainedBox限制最大宽度，同时设置width: double.infinity，让容器在小屏自适应、大屏保持固定宽度且整体居中
3. Row对齐优化：通过spaceBetween或Expanded实现文本与图标的左右分布，满足不同的视觉需求
4. 添加内边距：给文本和图标增加左右间距，避免内容贴紧容器边缘，提升视觉舒适度

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