如何在颤动中居中对齐卡片内的小部件

Question

我卡在我的设计中的某个地方，我试图放置 2 个包含更多子元素的容器，它们都被包裹在一个卡片小部件中。现在我面临的问题是我想将我的小部件对齐在一个精确的中心位置，但是当我在一个屏幕尺寸上执行此操作时，它会分散在另一个屏幕尺寸上，反之亦然。我无法为这部分进行通用设计，以便能够在所有类型的屏幕尺寸上工作。以下是随附的屏幕截图以供参考。

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

 //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

伙计们，我感谢您的帮助，但在尝试了不同的技术并花费了大量时间后，我自己想通了。所以基本上我在看代码中的错误位置。我不应该通过使用媒体查询代替 SizedBox 的 height 属性来提供卡的固定高度，而是相对于所有设备进行响应。下面是我如何做到的代码：

//old code
SizedBox(
            height: 193,
            width: 180,
            child: Card(
              color: Color(0xfffaf5f5),
              child: Column(...

//new code
SizedBox(
            //this is the how the height should be given
            height: MediaQuery.of(context).size.height * 0.25,
            width: 180,
            child: Card(
              color: Color(0xfffaf5f5),
              child: Column(....

这就是我实现它的方式。再次感谢您的帮助，谢谢:)

Answer 2

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

应该可以的。