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

Question

我Row在 Flutter App 中有这个小部件和一些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

对小部件使用size参数Icon不是一个很好的方法IconButton。你的图标变大了，IconButtons 不适应那个扩展的大小，这导致图标溢出。

相反，使用 上的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, 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;
        });
      }
    )
  ],
),