颤振约束不适合任何屏幕尺寸，为什么？

Question

在我的颤振代码中，我正在尝试制作一个可以适应多种屏幕尺寸的布局约束，但在我的两个模拟器上，一个是 6 英寸，另一个是 10 英寸，布局要么太小，要么太大.为什么？布局包含一列和四行。下面的代码仅显示第一行。我希望第一行的方块自动填充空间。底部的三行是硬编码的，因此请忽略它们。仅将您的答案集中在第一行。

代码如下：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
          backgroundColor: Colors.deepOrangeAccent[100],
          appBar: AppBar(
            title: Center(child: Text('Kakuro SideKick III')),
            backgroundColor: Colors.blueGrey[900],
          ),
          body: Column(mainAxisAlignment: MainAxisAlignment.end,
              //crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    GestureDetector(
                      onTap: () {
                        print('Just clicked on 1');
                      },
                      child: ConstrainedBox(
                          constraints: BoxConstraints(
                            minWidth: 40.0,
                            minHeight: 40.0,
                            maxWidth: 150.0,
                            maxHeight: 150.0,
                          ),
                          child: Container(
                              color: Colors.cyan,
                              width: double.infinity,
                              height: double.infinity,
                              padding: EdgeInsets.all(40.0),
                              margin: EdgeInsets.all(5.0),
                              child: Text('1'))),
                    ),
                    GestureDetector(
                      onTap: () {
                        print('Just clicked on 2');
                      },
                      child: ConstrainedBox(
                        constraints: BoxConstraints(
                          minWidth: 40.0,
                          minHeight: 40.0,
                          maxWidth: 150.0,
                          maxHeight: 150.0,
                        ),
                        child: Container(
                            color: Colors.cyan,
                            width: double.infinity,
                            height: double.infinity,
                            padding: EdgeInsets.all(40.0),
                            margin: EdgeInsets.all(5.0),
                            child: Text('2')),
                      ),
                    ),
                    GestureDetector(
                      onTap: () {
                        print('Just clicked on 3');
                      },
                      child: ConstrainedBox(
                        constraints: BoxConstraints(
                          minWidth: 40.0,
                          minHeight: 40.0,
                          maxWidth: 150.0,
                          maxHeight: 150.0,
                        ),
                        child: Container(
                            color: Colors.cyan,
                            width: double.infinity,
                            height: double.infinity,
                            padding: EdgeInsets.all(40.0),
                            margin: EdgeInsets.all(5.0),
                            child: Text('3')),
                      ),
                    ),
                    GestureDetector(
                      onTap: () {
                        print('Just clicked on 4');
                      },
                      child: ConstrainedBox(
                        constraints: BoxConstraints(
                          minWidth: 40.0,
                          minHeight: 40.0,
                          maxWidth: 150.0,
                          maxHeight: 150.0,
                        ),
                        child: Container(
                            color: Colors.cyan,
                            width: double.infinity,
                            height: double.infinity,
                            padding: EdgeInsets.all(40.0),
                            margin: EdgeInsets.all(5.0),
                            child: Text('4')),
                      ),
                    ),
                  ],
                ),

6" 布局

10" 布局

Answer 1

尝试使用 MediaQuery 代替数字，它看起来像：

minWidth: MediaQuery.of(context).size.width

在这种情况下存在两种使用 MediaQuery 的方法：

MediaQuery.of(context).size.width（从屏幕上获取整个宽度） MediaQuery.of(context).size.height （相同，但高度）

你可以用它来计算，例如：

MediaQuery.of(context).size.width * 0.1（占整个宽度的 10%）

MediaQuery.of(context).size.height* 0.05（全高的 5%）

试试看。

Answer 2

回答为什么这个问题相当简单：您正在设置明确的约束（即最小和最大高度/宽度），并且小部件不能缩小/扩展超出此范围，因此它们（在大多数情况下，无论如何）要么溢出屏幕，要么不填满它。

您想要实现的目标可以使用Expanded 来完成。如果要保留 1:1 的纵横比，请结合AspectRatio 使用。

像这样：

Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Expanded(
                  child: GestureDetector(
                    onTap: () {
                      print('Just clicked on 1');
                    },
                    child: AspectRatio(
                        aspectRatio: 1,
                        child: Container(
                            color: Colors.cyan,
                            padding: EdgeInsets.all(40.0),
                            margin: EdgeInsets.all(5.0),
                            child: Text('1'))),
                  ),
                ),
                Expanded(
                  child: GestureDetector(
                    onTap: () {
                      print('Just clicked on 2');
                    },
                    child: AspectRatio(
                        aspectRatio: 1,
                        child: Container(
                            color: Colors.cyan,
                            padding: EdgeInsets.all(40.0),
                            margin: EdgeInsets.all(5.0),
                            child: Text('2'))),
                  ),
                ),
                Expanded(
                  child: GestureDetector(
                    onTap: () {
                      print('Just clicked on 3');
                    },
                    child: AspectRatio(
                        aspectRatio: 1,
                        child: Container(
                            color: Colors.cyan,
                            padding: EdgeInsets.all(40.0),
                            margin: EdgeInsets.all(5.0),
                            child: Text('3'))),
                  ),
                ),
                Expanded(
                  child: GestureDetector(
                    onTap: () {
                      print('Just clicked on 4');
                    },
                    child: AspectRatio(
                        aspectRatio: 1,
                        child: Container(
                            color: Colors.cyan,
                            padding: EdgeInsets.all(40.0),
                            margin: EdgeInsets.all(5.0),
                            child: Text('4'))),
                  ),
                ),
              ],
            )