jjzjj

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

coder 2023-07-23 原文

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

第二个手机屏幕是我想要的结果。使用 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],
          ),
        )
      )
    );

最佳答案

因为您的应用没有响应。看，您正在以硬编码方式传递大小

例如:填充:EdgeInsets.only(bottom: 20.0)

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

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

在 Flutter 中，我们的 MediaQuery 组件有很多属性，其中之一是:MediaQuery.of(context).size.width(它获取设备的全宽大小) .到这里为止一切都很好，对吧？如果你在不同的设备上打印这个，你会得到不同的结果，这意味着从左/右开始的 20 的填充在两个设备上都是不同的。

我做了一个计算来“破解”这个并让它响应，得到这个: MediaQuery.of(context).size.width 并除以 400。为什么是 400？我和一个 friend 发现了这一点，当我们除法时，我们得到的值在非常不同的设备中几乎接近 1，所以，如果你得到结果(例如 1.5)并乘以 20，你会让你的应用有点像 react 灵敏。这是一种方式，第二种方式是使用LayoutBuilder，它需要一个上下文和一个约束作为参数。

通过约束，您可以在不同的设备中显示不同的模型设计，例如，buildConventionalDesig<> 用于宽度小于 400 的设备，例如，或 buildBiggerDesign 用于更大的手机，例如 iPhone Xs Max。

有一篇文章可以作为引用，对你有帮助，查一下: Build Response UIs in Flutter .它没有涵盖 MediaQuery 的这个技巧，但也许您可以获得新的见解。

希望这对您有所帮助。

关于flutter - 在不同屏幕尺寸上运行时的不同结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56338563/

flutter不同codeMediaQuerywidthdart

有关flutter - 在不同屏幕尺寸上运行时的不同结果的更多相关文章

  1. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法？ - 2

    总的来说，我对ruby​​还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  2. ruby - 在 Ruby 程序执行时阻止 Windows 7 PC 进入休眠状态 - 2

    我需要在客户计算机上运行Ruby应用程序。通常需要几天才能完成(复制大备份文件)。问题是如果启用sleep，它会中断应用程序。否则，计算机将持续运行数周，直到我下次访问为止。有什么方法可以防止执行期间休眠并让Windows在执行后休眠吗？欢迎任何疯狂的想法;-) 最佳答案 Here建议使用SetThreadExecutionStateWinAPI函数，使应用程序能够通知系统它正在使用中，从而防止系统在应用程序运行时进入休眠状态或关闭显示。像这样的东西:require'Win32API'ES_AWAYMODE_REQUIRED=0x0

  3. ruby - 如何每月在 Heroku 运行一次 Scheduler 插件？ - 2

    在选择我想要运行操作的频率时，唯一的选项是“每天”、“每小时”和“每10分钟”。谢谢!我想为我的Rails3.1应用程序运行调度程序。 最佳答案 这不是一个优雅的解决方案，但您可以安排它每天运行，并在实际开始工作之前检查日期是否为当月的第一天。 关于ruby-如何每月在Heroku运行一次Scheduler插件？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/8692687/

  4. ruby-on-rails - 如何在 ruby​​ 中使用两个参数异步运行 exe？ - 2

    exe应该在我打开页面时运行。异步进程需要运行。有什么方法可以在ruby​​中使用两个参数异步运行exe吗？我已经尝试过ruby​​命令-system()、exec()但它正在等待过程完成。我需要用参数启动exe，无需等待进程完成是否有任何ruby​​gems会支持我的问题？ 最佳答案 您可以使用Process.spawn和Process.wait2:pid=Process.spawn'your.exe','--option'#Later...pid,status=Process.wait2pid您的程序将作为解释器的子进程执行。除

  5. ruby - 无法运行 Rails 2.x 应用程序 - 2

    我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby​​:$rvmuseree-1.8.7-head我尝试运行服务器，然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r

  6. ruby - Sinatra:运行 rspec 测试时记录噪音 - 2

    Sinatra新手；我正在运行一些rspec测试，但在日志中收到了一堆不需要的噪音。如何消除日志中过多的噪音？我仔细检查了环境是否设置为:test，这意味着记录器级别应设置为WARN而不是DEBUG。spec_helper:require"./app"require"sinatra"require"rspec"require"rack/test"require"database_cleaner"require"factory_girl"set:environment,:testFactoryGirl.definition_file_paths=%w{./factories./test/

  7. ruby-on-rails - 无法让 rspec、spork 和调试器正常运行 - 2

    GivenIamadumbprogrammerandIamusingrspecandIamusingsporkandIwanttodebug...mmm...let'ssaaay,aspecforPhone.那么，我应该把“require'ruby-debug'”行放在哪里，以便在phone_spec.rb的特定点停止处理？(我所要求的只是一个大而粗的箭头，即使是一个有挑战性的程序员也能看到:-3)我已经尝试了很多位置，除非我没有正确测试它们，否则会发生一些奇怪的事情:在spec_helper.rb中的以下位置:require'rubygems'require'spork'

  8. ruby-on-rails - before_filter 运行多个方法 - 2

    是否有可能:before_filter:authenticate_user!||:authenticate_admin! 最佳答案 before_filter:do_authenticationdefdo_authenticationauthenticate_user!||authenticate_admin!end 关于ruby-on-rails-before_filter运行多个方法，我们在StackOverflow上找到一个类似的问题： https://

  9. 报告回顾丨模型进化狂飙，DetectGPT能否识别最新模型生成结果？ - 2

    导读语言模型给我们的生产生活带来了极大便利，但同时不少人也利用他们从事作弊工作。如何规避这些难辨真伪的文字所产生的负面影响也成为一大难题。在3月9日智源Live第33期活动「DetectGPT：判断文本是否为机器生成的工具」中，主讲人Eric为我们讲解了DetectGPT工作背后的思路——一种基于概率曲率检测的用于检测模型生成文本的工具，它可以帮助我们更好地分辨文章的来源和可信度，对保护信息真实、防止欺诈等方面具有重要意义。本次报告主要围绕其功能，实现和效果等展开。（文末点击“阅读原文”，查看活动回放。）Ericmitchell斯坦福大学计算机系四年级博士生，由ChelseaFinn和Chri

  10. 屏幕录制为什么没声音？检查这2项，轻松解决 - 2

    相信很多人在录制视频的时候都会遇到各种各样的问题，比如录制的视频没有声音。屏幕录制为什么没声音？今天小编就和大家分享一下如何录制音画同步视频的具体操作方法。如果你有录制的视频没有声音，你可以试试这个方法。 一、检查是否打开电脑系统声音相信很多小伙伴在录制视频后会发现录制的视频没有声音，屏幕录制为什么没声音？如果当时没有打开音频录制，则录制好的视频是没有声音的。因此，建议在录制前进行检查。屏幕上没有声音，很可能是因为你的电脑系统的声音被禁止了。您只需打开电脑系统的声音，即可录制音频和图画同步视频。操作方法：步骤1：点击电脑屏幕右下侧的“小喇叭”图案，在上方的选项中，选择“声音”。 步骤2：在“声

随机推荐