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

问题描述

我在 Flutter 应用中有这个 Row 小部件和一些 IconButton

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,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,onpressed: () {
        incIndex(pageNumbers);
      }),IconButton(
      icon: Icon(Icons.skip_next,onpressed: () {
        setState(() {
          pageIndex = pageNumbers;
        });
      }),IconButton(
      icon: Icon(Icons.location_searching,onpressed: () {
        setState(() {
          pageIndex = userPage;
        });
      }),],),

如下图所示：

红线只是为了区分高差

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

解决方法

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

相反，在 iconSize 上使用 IconButton 参数，并为 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,onPressed: decIndex
    ),Text('Page $pageIndex',textAlign: TextAlign.center,style: TextStyle(
        color: Colors.amber,fontSize: 20,fontWeight: FontWeight.bold)),icon: Icon(Icons.arrow_right,onPressed: () {
        incIndex(pageNumbers);
      }),IconButton(
      iconSize: 35,icon: Icon(Icons.skip_next,onPressed: () {
        setState(() {
          pageIndex = pageNumbers;
        });
      }),icon: Icon(Icons.location_searching,onPressed: () {
        setState(() {
          pageIndex = userPage;
        });
      }
    )
  ],),