Question

在不同尺寸的手机上运行时，我在同一屏幕上得到的结果不同：

第二个手机屏幕是我想要的结果。最初使用expanded可以帮助我解决第一个电话屏幕的问题（绿色栏下方有多余的空间）。后来，我意识到第二个手机屏幕上出现了溢出现象。因此，我使用SingleChildScrollView解决了溢出问题。但是，这导致第一个电话屏幕再次出现多余空间的问题。

代码：

    final quizBottomContentText = Container(
      width: MediaQuery.of(context).size.width,
      padding: EdgeInsets.only(left:30.0, right:30.0, top: 30.0, bottom: 30),
      child: Text(
        questions[questionNum].title,
        style: TextStyle(fontSize: 18.0),
      )
    );

    final quizOptions = Container(
      width: MediaQuery.of(context).size.width,
      padding: EdgeInsets.only(bottom: 20.0),
      child: Center(
        child: Column(
                  children: questions[questionNum].options.map<Widget>(
                    (option) =>  SimpleRoundButton(
                        backgroundColor: Color.fromRGBO(58, 66, 86, 1.0),
                        buttonText: Text(option, 
                            style: TextStyle(
                                color: Colors.white
                            ),
                        ),
                        textColor: Colors.white,
                        onPressed: (){},
                    ),
              ).toList(),
        )
      )
    );

    final countdown = CountdownWidget(
          width: MediaQuery.of(context).size.width,
          duration: 20,
          triviaState: triviaState,
        );

    final quizBottomContent = Expanded(
      child: SingleChildScrollView(
        child: Container(
        width: MediaQuery.of(context).size.width,
          child: Column(
            children: <Widget>[quizBottomContentText, quizOptions, countdown],
          ),
        )
      )
    );

Answer 1

因为您的应用没有响应。看，您正在通过硬编码方式传递尺寸

例如：padding: EdgeInsets.only(bottom: 20.0)

这是什么意思？意味着在模拟器中，您会得到结果，也许是您期望的结果，但是在另一台设备中，也许在iPhone Xs Max中，结果是不同的，那么您能做什么？

您将在此处有两个选择，第一个是使用MediaQuery组件。我将向您展示如何以及为什么使用我的方式来更好地理解。

在Flutter中，我们拥有具有很多特性的MediaQuery组件，其中之一是：MediaQuery.of(context).size.width（这将获取设备的全宽尺寸）。到这里一切都还好吧？如果您在不同的设备上打印此图片，则会得到不同的结果，这意味着在这两个设备中，从左/右有20个填充的填充将有所不同。

我进行了计算，以“破解”并使其具有响应能力，得到以下信息： MediaQuery.of(context).size.width除以400。为什么是400？我和一个朋友发现了这一点，当我们进行除法运算时，在非常不同的设备中我们得到的值几乎接近1，因此，如果您得到结果（例如1.5）并乘以20，则您的应用程序将达到反应灵敏。这是一种方法，第二种方法是使用需要上下文和约束作为参数的LayoutBuilder。

有约束，您可以操作以在不同的设备中显示不同的模型设计，例如，buildConventionalDesig用于宽度小于400的设备，例如，buildBiggerDesign用于较大的电话（例如iPhone Xs）最多

有一篇文章可以作为您的参考资料来帮助您，请检查一下： Build Response UIs in Flutter。 MediaQuery并未涵盖此技巧，但也许您可以获得新的见解。

希望这对您有所帮助。

在不同尺寸的屏幕上运行时，结果不同

1 个答案: