Flutter CupertinoButton 子项未正确对齐

Question

每当我将一个孩子放入我的CupertinoButton 时，它的对齐方式如下：

这是我的代码：

Row(
                    children: [
                      Padding(
                        padding: EdgeInsets.only(left: 27, top: 27),
                        child: Align(
                            alignment: Alignment.topLeft,
                            child: SizedBox(
                              width: 60,
                              height: 60,
                              child: CupertinoButton(
                                color: Color(0xff383838),
                                onPressed: () {  },
                                child: Text("C", style: TextStyle(fontSize: 21, color: Color(0xff78dbff)),)
                              ),
                            )
                        ),
                      ),
                      Padding(
                          padding: EdgeInsets.only(left: 27, top: 27),
                          child: SizedBox(
                            width: 60,
                            height: 60,
                            child: CupertinoButton(
                              color: Color(0xff383838),
                              onPressed: () {  },
                              child: Text("±", style: TextStyle(fontSize: 21, color: Color(0xff78dbff)),),
                            ),
                          )
                      ),
                      Padding(
                          padding: EdgeInsets.only(left: 27, top: 27),
                          child: SizedBox(
                            width: 60,
                            height: 60,
                            child: CupertinoButton(
                              color: Color(0xff383838),
                              onPressed: () {  },
                              child: Text("%", style: TextStyle(fontSize: 21, color: Color(0xff78dbff)),),
                            ),
                          )
                      ),
                      Padding(
                          padding: EdgeInsets.only(left: 27, top: 27),
                          child: SizedBox(
                            width: 60,
                            height: 60,
                            child: CupertinoButton(
                              color: Color(0xff383838),
                              onPressed: () {  },
                              child: Text("÷", style: TextStyle(fontSize: 27, color: Color(0xffff6e6e))),
                            ),
                          )
                      )
                    ],
                  ),

如果需要，我可以提供完整的文件。

我希望文本在按钮的中心对齐，而不是在它旁边。将Text 的textAlign 更改为TextAlign.center 确实使它稍微向中心移动，但仍然很远。在TextButton 中不会出现此问题。这个问题不仅是Text，把一个icon作为child之后，问题还是一样。我尝试使用Padding 来解决问题，但这根本没有帮助。

我使用CupertinoPageScaffold 作为我的脚手架。没有对Row 的父母进行任何修改。我不知道是什么导致了这个问题。

Answer 1

CupertinoButton 的所有边都有一个默认的填充 16。因此，当您使用 SizedBox 缩小时，子对象仍保持在其原始位置。

来自 cupertinobutton 源代码：

 const EdgeInsets _kButtonPadding = EdgeInsets.all(16.0);

通过将 CupertinoButton 填充为零来尝试以下操作：

Padding(
                padding: EdgeInsets.only(left: 27, top: 27),
                child: SizedBox(
                  width: 60,
                  height: 60,
                  child: CupertinoButton(
                    padding: EdgeInsets.all(0),
                    color: Color(0xff383838),
                    onPressed: () {},
                    child: Text(
                      "±",
                      style:
                          TextStyle(fontSize: 21, color: Color(0xff78dbff)),
                    ),
                  ),
                )),