dart - Flutter - 模拟器和手机中的布局不同

Question

我正在 Flutter 中创建一个新项目。我制作的每个小部件都运行良好..但是当我想在行中放置两个图像容器时出现了一些问题，它在 1080x1920 的模拟器上完全没问题，但是当我在我的 460x854 手机上打开它时。 ..它因对称填充而崩溃。我已经阅读了一些关于 MediaQuery 的内容，但是因为我是初学者，所以我无法实现它。

有人可以帮助我吗？

代码如下(完整代码太长):

return new Scaffold(
    body: ListView(
  children: <Widget>[
    new Stack(
      children: <Widget>[
        Container(
          child: Column(
               children: <Widget>[
               //sdsds
                new Row(
                  children: <Widget>[
                    Expanded(
                      child: Row(
                         //HERE IS THE IMAGE IN ROW
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          new Container(
                            height: 160.0,
                            width: 160.0,
                            decoration: BoxDecoration(
                                image: DecorationImage(
                              image: AssetImage('intro/1pew.png'),
                            )),
                          ),
                          new Container(
                            height: 160.0,
                            width: 160.0,
                            decoration: BoxDecoration(
                                image: DecorationImage(
                              image: AssetImage('intro/2pew.png'),
                            )),

这是屏幕截图(顺便说一句，忽略那些长凳):

Answer 1

而不是设置高度和宽度。我会使用 Row，然后添加 Expanded 小部件，使用 AspectRatio 子元素来强制行为。

例子:

Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.max,
      children: <Widget>[
        Expanded(
          child: AspectRatio(
            aspectRatio: 1,
            child: Image.asset("assets/image1.png"),
          ),
        ),
        Expanded(
          child: AspectRatio(
            aspectRatio: 1,
            child: Image.asset("assets/image2.png"),
          ),
        )
      ],
    );
  }

这会强制 Row 中的两个项目与 Expanded 的大小相同 AspectRatio 小部件将强制为正方形，然后您的 View 可以填满那个方 block 。