flutter - 如何在“flutter ”中较小行内的中心对齐大图标？

Question

我正在尝试实现以下布局:

以下是我的代码:

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Icon(
      Icons.fast_rewind,
    ),
    SizedBox(
      width: 20,
    ),
    Icon(
      Icons.pause_circle_filled,
      size: 60,
    ),
    SizedBox(
      width: 20,
    ),
    Icon(
      Icons.fast_forward,
    ),
  ],
), 

这样，我得到的是:

我认为crossAxisAlignment:CrossAxisAlignment.center将使“暂停”按钮居中。但事实并非如此。如果我删除暂停按钮的大小为60，则可以正常工作。但是，我希望此按钮更大。
如何获得所需的布局？

Answer 1

堆栈小部件可能会为您提供帮助。根据Z轴定位小部件
给出想法的样本:

 Stack(children: [
          Padding(
            padding: EdgeInsets.all(20),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Icon(
                  Icons.fast_rewind,
                ),
                Icon(
                  Icons.fast_forward,
                ),
              ],
            ),
          ),
          Positioned.fill(
            child: Center(
              child: Icon(
                Icons.pause_circle_filled,
                size: 60,
              ),
            ),
          ),
        ],
  ),