在列中居中项目答案

【问题标题】：Center items in column在列中居中项目
【发布时间】：2022-11-12 11:16:33
【问题描述】：

我想根据下图创建两个项目（文本上方的圆圈，水平居中）：

我创建了以下代码：

Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    IconButton(
      icon: const Icon(
        Icons.circle,
        color: Colors.white,
        size: 40,
      ),
      onPressed: () {},
    ),
    const Text(
      'text',
      style: TextStyle(
        color: Colors.white,
        fontSize: 16,
      ),
    ),
  ],
)

然而，结果如下：

我发现问题出在IconButton 的size 上。当我删除这条线时，图标会变小（如预期的那样），下面的文本将居中。似乎在增加图标大小时，不是从图标的中心点（向各个方向均匀）增加，而是增加向右.有人可以帮我吗？是否可以在不中断Text 居中的情况下更改图标的大小？或者有没有办法根据需要将其居中？谢谢你。

【问题讨论】：

标签： android ios flutter dart

【解决方案1】：

实际上，Axid 列居中，但 IconButton 会导致问题。

尝试这个：

Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            IconButton(
              padding: EdgeInsets.zero, // add this
              icon: const Icon(
                Icons.circle,
                color: Colors.white,
                size: 40,
              ),
              onPressed: () {},
            ),
            const Text(
              'text',
              style: TextStyle(
                color: Colors.white,
                fontSize: 16,
              ),
            ),
          ],
        ),

IconButton 默认带有初始填充，删除它将显示它们水平居中。

【讨论】：