Flutter：使具有不同Icon大小的IconButtons和Row中的Text元素居中对齐

Question

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

它们显示如下图所示：

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

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

Answer 1

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

而是在 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;
        });
      }
    )
  ],
),

Flutter：使具有不同Icon大小的IconButtons和Row中的Text元素居中对齐

Flutter : Make IconButtons with different Icon sizes and Text elements in Row align to the center

styles

row

alignment

flutter

iconbutton