user-interface - 如何在 float 中使卡中的小部件居中对齐

Question

即时通讯卡在了我的设计中的某个地方，即时通讯试图放置2个容器，这些容器再没有几个 child 了，它们都包裹在卡片小部件中。现在面临的问题是我想将小部件对准精确的中心位置，但是当我在一个屏幕尺寸上进行操作时，它分散在另一屏幕尺寸上，反之亦然。我无法为此部分进行通用设计，使其能够在所有类型的屏幕尺寸上工作。以下是随附的屏幕截图，以供引用。





如果您看到竖起大拇指和礼物的图标，则表示它们在容器灰色区域的中间没有完全对齐。我希望它们准确居中。现在，如果我将它们放在一个屏幕上居中，则它们会在另一个屏幕上溢出，反之亦然。以下是这些部分的代码。

 //code for card 1, i-e: 98/100 card
SizedBox(
                height: 193,
                width: 180,
                child: Card(
                  color: Color(0xfffaf5f5),
                  child: Column(
                    children: <Widget>[
                      Container(
                        width: MediaQuery.of(context).size.width,
                        height: MediaQuery.of(context).size.height * 0.16,
                        color: Colors.white,
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Text(
                              '98',
                              style: TextStyle(
                                fontFamily: 'Karla',
                                fontSize: 60,
                                fontWeight: FontWeight.bold,
                                color: Color(0xff54c19f),
                              ),
                            ),
                            Text(
                              '/100',
                              style: TextStyle(
                                fontFamily: 'Karla',
                                fontSize: 20,
                                fontWeight: FontWeight.bold,
                                color: Color(0xff75777d),
                              ),
                            ),
                          ],
                        ),
                      ),
                      Container(
                        alignment: Alignment.center,
                        color: Colors.transparent,
                        width: MediaQuery.of(context).size.width,
                        margin: EdgeInsets.only(top: 7),
                        child: Image.asset(
                          'images/pouce-ok.png',
                          width: 30,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              //code for card 2, i-e: 129pts card
              SizedBox(
                height: 193,
                width: 180,
                child: Card(
                  color: Color(0xfffaf5f5),
                  child: Column(
                    children: <Widget>[
                      Container(
                        width: MediaQuery.of(context).size.width,
                        height: MediaQuery.of(context).size.height * 0.16,
                        color: Colors.white,
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Text(
                              '129',
                              style: TextStyle(
                                fontFamily: 'Karla',
                                fontSize: 60,
                                fontWeight: FontWeight.bold,
                                color: Color(0xff478dd0),
                              ),
                            ),
                            Text(
                              'pts',
                              style: TextStyle(
                                fontFamily: 'Karla',
                                fontSize: 20,
                                fontWeight: FontWeight.bold,
                                color: Color(0xff75777d),
                              ),
                            ),
                          ],
                        ),
                      ),
                      Container(
                        margin: EdgeInsets.only(top: 7),
                        child: Image.asset(
                          'images/cadeaux.png',
                          width: 35,
                        ),
                      ),
                    ],
                  ),
                ),
              ),

无论屏幕大小如何，我都希望它们都居中对齐，不胜感激，谢谢。

Answer 1

mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,

那应该做。