Flutter 颤振：使行中具有不同图标大小和文本元素的图标按钮与中心对齐

我在颤振应用程序中有一个

行

小部件，带有一些

图标按钮

s

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    IconButton(
      icon: Icon(Icons.skip_previous,
        color: Colors.amber, size: 35),
      onPressed: () {
        setState(() {
          pageIndex = 1;
        });
      }),
    IconButton(
      icon: Icon(Icons.arrow_left,
        color: Colors.amber, size: 45),
      onPressed: decIndex),
    Text('Page $pageIndex',
      textAlign: TextAlign.center,
      style: TextStyle(
        color: Colors.amber,
        fontSize: 20,
        fontWeight: FontWeight.bold)),
    IconButton(
      icon: Icon(Icons.arrow_right,
        color: Colors.amber, size: 45),
      onPressed: () {
        incIndex(pageNumbers);
      }),
    IconButton(
      icon: Icon(Icons.skip_next,
        color: Colors.amber, size: 35),
      onPressed: () {
        setState(() {
          pageIndex = pageNumbers;
        });
      }),
    IconButton(
      icon: Icon(Icons.location_searching,
        color: Colors.amber, size: 35),
      onPressed: () {
        setState(() {
          pageIndex = userPage;
        });
      }),
  ],
),

它们显示如下图所示：

红线只是为了清楚海拔之间的差异

我要使所有项目通过其中心在同一条线上对齐。 我该怎么做

---

在

图标上使用
大小
参数

对于

图标按钮

小部件不是一个很好的方法。 您的图标正在变大，并且

IconButton

s无法适应扩展的大小，这导致图标溢出

相反，使用

IconButton

上的

iconSize

参数，给

图标赋予相同的值，并将其从
图标中删除

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    IconButton(
      iconSize: 35,
      icon: Icon(Icons.skip_previous, color: Colors.amber),
      onPressed: () {
        setState(() {
          pageIndex = 1;
        });
      }
    ),
    IconButton(
      iconSize: 45,
      icon: Icon(Icons.arrow_left, color: Colors.amber),   
      onPressed: decIndex
    ),
    Text('Page $pageIndex',
      textAlign: TextAlign.center,
      style: TextStyle(
        color: Colors.amber,
        fontSize: 20,
        fontWeight: FontWeight.bold)),
    IconButton(
      iconSize: 45,
      icon: Icon(Icons.arrow_right, color: Colors.amber),
      onPressed: () {
        incIndex(pageNumbers);
      }),
    IconButton(
      iconSize: 35,
      icon: Icon(Icons.skip_next, color: Colors.amber),
      onPressed: () {
        setState(() {
          pageIndex = pageNumbers;
        });
      }),
    IconButton(
      iconSize: 35,
      icon: Icon(Icons.location_searching, color: Colors.amber),
      onPressed: () {
        setState(() {
          pageIndex = userPage;
        });
      }
    )
  ],
),

我认为您需要的是跨轴对齐。你必须把它调到中间。请阅读此处的可用选项：@Uni我使用了所有CrossAxisAlignment值，并且得到了相同的值，这意味着图标大小不同。请看下面某人的回答。@Uni这里的问题不是轴的问题。由于
IconButton
不适应增大的
图标
大小，OPs图标溢出
IconButton
。我贴了一个答案，看看吧。太谢谢你了，是的，问题解决了。谢谢