Flutter : 使具有不同图标大小的 IconButtons 和 Row 中的 Text 元素对齐到中心

Posted 2023-02-23

【中文标题】Flutter : 使具有不同图标大小的 IconButtons 和 Row 中的 Text 元素对齐到中心

【英文标题】：Flutter : Make IconButtons with different Icon sizes and Text elements in Row align to the center

【发布时间】：2021-08-06 16:53:57

【问题描述】：

我在 Flutter App 中有这个 Row 小部件和一些 IconButtons

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;
        );
      ),
  ],
),

它们的显示如下图所示：

红线只是为了清楚标高之间的差异

我想让所有项目通过它们的中心在同一条线上对齐。 我该怎么做？

【问题讨论】：

我认为您正在寻找的是 CrossAxisAlignment。您必须将其设置为居中。在此处阅读可用选项：api.flutter.dev/flutter/rendering/CrossAxisAlignment-class.html

@Uni 我使用了所有 CrossAxisAlignment 值并且我得到了相同的值

这意味着图标大小不一样。看看下面某人的回答。

@Uni 这里的问题与Axis 无关。 OPs 图标溢出IconButton，因为IconButton 不适应增加的Icon 大小。我发布了一个答案，请查看。

【参考方案1】：

在Icon 上使用size 参数对于IconButton 小部件来说不是一个很好的方法。 您的图标变大了，IconButtons 无法适应扩展后的大小，导致图标溢出。

改为在IconButton 上使用iconSize 参数，并为Icon 赋予相同的值，然后将其从Icon 中删除。

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;
        );
      
    )
  ],
),

【讨论】：

非常感谢，是的，已经解决了，非常感谢