Question

我已经将这些SizedBoxes包装在Wrap（）小部件中，并试图使其正确居中，但未能做到这一点。不太确定为什么顶部的两个小部件偏向左侧的中心，如下所示：
[截图] [1]

在横向模式下，它们可以完美地居中，但是每当设备处于纵向模式时，它们似乎都无法正确居中。有人可以帮忙吗？

Answer 1

感谢提供完整的代码，它有助于简化调试过程。

这是您应该做的。

删除填充小部件，因为它被认为是要包装的子级之一。
使用runSpacing来分隔包裹的孩子。

遵循此link以在dartpad中查看解决方案

Answer 2

您使用Wrap是否有正当理由？如果不是，请用Column替换它并删除所有属性，它应该可以工作。这是我用来使所有内容居中的代码：

SingleChildScrollView(
      child: Center(
        child: Column(
            children: [
              SizedBox(
                width: 250,
                height: 200,
                child: RaisedButton(
                  shape: new RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
                  //focusColor: Colors.transparent,
                  highlightColor: Colors.white,
                  //textColor: Colors.deepOrangeAccent,
                  color: Colors.transparent,
                  onPressed: () {},
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Icon(Icons.local_movies,
                        size: 30,),
                      Padding(padding: EdgeInsets.all(10),),
                      Text('Movies',
                        style: GoogleFonts.lobster(fontSize: 30, color: Colors.white),),
                    ],
                  ),
                ),
              ),
              Padding(padding: EdgeInsets.all(20),),
              SizedBox(
                width: 250,
                height: 200,
                child: RaisedButton(
                  shape: new RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
                  color: Colors.transparent,
                  onPressed: () {},
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Icon(Icons.tv,
                        size: 30,),
                      Padding(padding: EdgeInsets.all(10),),
                      Text('Shows',
                        style: GoogleFonts.lobster(fontSize: 30, color: Colors.white),),
                    ],
                  ),
                ),
              ),
              Padding(padding: EdgeInsets.all(20),),
              SizedBox(
                width: 250,
                height: 200,
                child: RaisedButton(
                  shape: new RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
                  color: Colors.transparent,
                  onPressed: () {},
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Icon(Icons.live_tv,
                        size: 30,),
                      Padding(padding: EdgeInsets.all(10),),
                      Text('Live TV',
                        style: GoogleFonts.lobster(fontSize: 30, color: Colors.white),),
                    ],
                  ),
                ),
              ),
            ]
        ),
      ),
    );

希望它会有所帮助:)如果可以，请投赞成票并接受作为答复。

Answer 3

除了在小部件之间添加填充之外，您还可以删除它们，并使用带有填充的Container而不是像这样的SizedBox小部件

         Container(
            width: 250,
            height: 200,
            padding: EdgeInsets.all(20),

为帮助您设计UI，您可以激活调试画并查看组成UI的所有元素

似乎无法正确地将小部件居中

3 个答案: