草庐IT

Flutter 布局障碍

coder 2023-07-22 原文

我是 Flutter 的新手 - 现在已经在我的应用程序上工作了几个月，并且在某些领域取得了很好的进展，但在其他领域却没有。我无法找出布置我的一系列屏幕的“正确方法”，所有这些屏幕在某些方面都有些相似。

简而言之，除了应用栏之外，脚手架还将包含一个容器，其中我有一个 Cupertino Segmented Control。分段控件用于在其“下方”的 IndexedStack 控件之间切换。

堆栈的每个子项都可以有不同的内容 - 有时是 ListView ，有时是包含许多文本输入、开关等的表单。因此结构在逻辑上可能如下所示:

Body
  SegmentedControl
  IndexStack
    Child 1
    Child N

我的问题是我想要/需要堆栈的所有子项来“填充主体的剩余区域”。因此，如果我可以在这里编一些数字，例如:设备高 600 像素，appbar 占 40，分段控件占 60，每个堆栈子项留出 500 像素。但在实践中，我似乎无法推断出我 body 的“剩余内容高度”。我希望(并且认为)有某种类型的布局小部件或容器小部件可以“自动调整所有剩余空间的大小”，但到目前为止还没有找到它。我尝试了许多不同小部件的多种组合，但似乎没有一个能解决问题。这是我的布局代码的浓缩 block :

body: Container(
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
      Padding(
        padding: const EdgeInsets.only(top: 16.0, bottom: 16.0),
        child: CupertinoSegmentedControl(
          children: tabOptions,
          onValueChanged: tabChanged,
          groupValue: curTabIndex,
        ),
      ),
      Container(
        height: 400.0, //needs to be 'all the rest' instead of a constant
        width: double.infinity,
        child: ListView(
          children: <Widget>[
            Text(“Example Text - would really be list tiles"),
            Text(“displaying results of database query"),
          ],
        ),
      ),
     ],            
   ), 
 ),

我只展示了索引堆栈的一个 child 。实际上我可以有几个。如果我不给容纳 ListView 的容器一个有限的高度(和某种宽度)，RenderBox 就无法绘制，即我会收到错误。挑战在于让堆栈子项占用尽可能多的水平和垂直空间，并且在内容超出布局高度的情况下让它们的内容“可滚动”。我会尝试任何人的建议...我确信有办法做到这一点。

谢谢!

最佳答案

选项 1:

将 Container 小部件替换为 Expanded，它将在可用空间上展开，如下所示

   Expanded(
   //Container(
    //height: 400.0, //needs to be 'all the rest' instead of a constant
   // width: double.infinity,
    child: ListView(

扩展文档:https://docs.flutter.io/flutter/widgets/Expanded-class.html

选项 2:

使用 MediaQuery.of(context).size.height 计算所需的高度。不确定这是否有效，或者这是否是一个好的做法。

关于Flutter 布局障碍，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53620649/

障碍Flutter子项section部件flutter-layout

有关Flutter 布局障碍的更多相关文章

  1. ruby - nanoc 和多种布局 - 2

    是否可以为特定(或所有)项目使用多个布局？例如，我有几个项目，我想对其应用两种不同的布局。一个是绿色的，一个是蓝色的(但是)。我想将它们编译到我的输出目录中的两个不同文件夹中(例如v1和v2)。我一直在玩弄规则和编译block，但我不知道这是怎么回事。因为，每个项目在编译过程中只编译一次，我不能告诉nanoc第一次用layout1编译，第二次用layout2编译。我试过这样的东西，但它导致输出文件损坏。compile'*'doifitem.binary?#don’tfilterbinaryitemselsefilter:erblayout'layout1'layout'layout2'

  2. 【自动驾驶环境感知项目】——基于Paddle3D的点云障碍物检测 - 2

    文章目录1.自动驾驶实战：基于Paddle3D的点云障碍物检测1.1环境信息1.2准备点云数据1.3安装Paddle3D1.4模型训练1.5模型评估1.6模型导出1.7模型部署效果附录show_lidar_pred_on_image.py1.自动驾驶实战：基于Paddle3D的点云障碍物检测项目地址——自动驾驶实战：基于Paddle3D的点云障碍物检测课程地址——自动驾驶感知系统揭秘1.1环境信息硬件信息CPU:2核AI加速卡:v100总显存:16GB总内存:16GB总硬盘:100GB环境配置Python:3.7.4框架信息框架版本:PaddlePaddle2.4.0（项目默认框架版本为2.3

  3. Flutter 环境变量配置和flutter doctor中的错误解决 - 2

    一、环境变量右键点击我的电脑-属性：然后找到环境变量 1.Android的SDK不在C盘的话需要额外配这个到用户环境变量：ANDROID_HOMED:\AndroidSDK2.然后在系统变量：Path中添加一条这样的值        D:\Flutter\flutter\bin             这个值写flutter包解压的实际地址即可 3.在系统变量中添加两个镜像变量：        变量名：FLUTTER_STORAGE_BASE_URL      变量值：https://storage.flutter-io.cn        变量名：PUB_HOSTED_URL      变量

  4. ruby-on-rails - 我可以在没有 Controller 的情况下直接从 routes.rb 渲染布局吗？ - 2

    我想为网站的管理和公共(public)部分设置一对样式指南。每个都需要自己的布局，其中包含静态html和调用erbpartials的混合(因此静态页面不会削减它)。我不需要Controller来为这些页面提供服务，而且我不希望有效的仅开发内容使其余代码困惑。这让我想知道是否有一种方法可以直接呈现布局。免责声明:我明白这不是我应该经常/永远做的事情，而且我知道有很多争论可以解释为什么这是一个坏主意。我对这是否可能感兴趣。有没有办法让我直接从routes.rb渲染布局而不通过Controller？ 最佳答案 出于某种奇怪的原因，我想暂时

  5. ruby-on-rails - 设计 Controller 如何改变布局？ - 2

    这个问题在这里已经有了答案:differentlayoutforsign_inactionindevise(8个答案)关闭7年前。如何更改设计Controller中的布局？

  6. ruby-on-rails - Rails - 如何在布局中查找域 url - 2

    我有request.env['http_host']在本地主机上工作，但在heroku的布局页面中引用时会导致错误。此请求在View中工作并显示正确的基本url，但是当我将代码移动到布局时它会导致错误。注意-我正在使用它来为html电子邮件中的图像构建绝对url。收到错误:ActionView::Template::Error(undefinedmethod`env'fornil:NilClass): 最佳答案 如果你想要没有端口的主机，只需使用:request.host编辑:糟糕，我刚刚注意到您正在使用View中的代码。我不知道它

  7. Ruby GUI(非复杂布局) - 2

    我对RubyGUI设计做了很多研究，这似乎是Ruby倾向于落后的领域。我探索了MonkeyBars、wxRuby、fxRuby、Shoes等选项，只是想从Ruby社区获得一些意见。虽然它们绝对可用，但每一个的开发似乎都在下降。我在任何(减去fxRuby书)上都找不到大量有用的文档或用户基础。我只是想制作一个简单的GUI，所以我真的不想花费数百小时来学习更复杂的工具的复杂性或尝试使用甚至不再开发的东西(鞋子是应用程序的类型我正在寻找，但它有很多问题并且没有得到积极开发。)在所有选项中，你们会推荐哪个选项是最快的，并且仍然具有某种开发基础？谢谢! 最佳答案

  8. ruby - Rails 渲染 Controller 中的部分和布局 - 2

    我正在覆盖设计注册Controller的创建操作。我有两种注册表格，个人或公司，公司有一个名为company_form的字段设置为true以区分这两种表格。在表单验证后，我希望呈现正确的表单(以前无论我使用什么表单，它都会返回默认表单)。我遇到了一个问题，即只渲染了部分(很明显，因为我只渲染了部分)，但我还需要渲染布局/应用程序文件。classRegistrationsControllerifresource.company_formrenderpartial:'shared/company_signup_form'elserenderpartial:'/shared/individu

  9. ruby-on-rails - 缺少带有 { :locale=>[:en], :formats=>[:html], 的模板布局/邮件程序 - 2

    我正在学习michaelharltrails教程，但出现此错误Missingtemplatelayouts/mailerwith{:locale=>[:en],:formats=>[:html],:variants=>[],:handlers=>[:raw,:erb,:html,:builder,:ruby,:coffee,:jbuilder]}.Searchedin:*"/home/ubuntu/workspace/app/views"预览账户激活时这是我的user_mailer.rbclassUserMailer错误突出显示了mailto:user.email,subject:"A

  10. ruby - Sinatra 中的嵌套布局 - 2

    tl;dr:在Sinatra中是否有一种干净的嵌套布局方式？对于我网站上的所有页面，我有一个通用的layout.erb，它呈现页眉、页脚和其他一些位。对于这些页面的一个子集，我想使用内部布局，除了那些公共(public)位之外，它还呈现左侧菜单。全局erb:pageTemplate执行layout.erb，其中yield执行pageTemplate在子集中erb:pageTemplate执行layout.erb，其中yield执行specificLayout.erb，其中yield执行pageTemplate。有道理吗？我对单独的类、before语句和任何其他ruby​​魔法持开放态度

随机推荐