部分可见的底部工作表 - 颤动

2024-01-06

在颤振中是否可以在初始状态下部分查看底部工作表,然后能够展开/关闭?

我提供了 Google 地图实现的示例的屏幕截图。


Use the DraggableScrollableSheet小部件与Stack widget:

这是gist https://gist.github.com/rohan20/869492358cbb15311538f069a0c749af对于此^ GIF 中的整个页面,或尝试Codepen https://codepen.io/rohantaneja/pen/JjYgPzm.

整个页面的结构如下:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          CustomGoogleMap(),
          CustomHeader(),
          DraggableScrollableSheet(
            initialChildSize: 0.30,
            minChildSize: 0.15,
            builder: (BuildContext context, ScrollController scrollController) {
              return SingleChildScrollView(
                controller: scrollController,
                child: CustomScrollViewContent(),
              );
            },
          ),
        ],
      ),
    );
  }


In the Stack:
- 谷歌地图是最下层。
- 标题(搜索字段+水平滚动条)位于地图上方。
- DraggableBottomSheet 位于标题上方。

一些有用的参数定义在draggable_scrollable_sheet.dart:

  /// The initial fractional value of the parent container's height to use when
  /// displaying the widget.
  ///
  /// The default value is `0.5`.
  final double initialChildSize;

  /// The minimum fractional value of the parent container's height to use when
  /// displaying the widget.
  ///
  /// The default value is `0.25`.
  final double minChildSize;

  /// The maximum fractional value of the parent container's height to use when
  /// displaying the widget.
  ///
  /// The default value is `1.0`.
  final double maxChildSize;

编辑:谢谢@亚历杭德罗 https://stackoverflow.com/questions/52403709/partially-viewable-bottom-sheet-flutter/62089808?noredirect=1#comment121601194_62089808用于指出小部件名称中的拼写错误:)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

部分可见的底部工作表 - 颤动 的相关文章

  • Dart如何向字符串数字添加逗号

    我正在尝试适应这一点 在数字字符串中插入逗号 https stackoverflow com questions 721304 insert commas into number string在 Dart 工作 但没有运气 其中任何一个都不
  • Firebase云函数在Flutter中返回null,因为它仍在运行

    更新 我从我的 firebase 控制台得到这个 函数执行花费了 2906 毫秒 完成状态代码 200 15 秒后 我得到 console log DOC 确实存在 我正在运行这个云火库功能 它 有效 但我不断得到这样的回报 FLUTTER
  • Flutter textfield Flutter RTL光标位置问题n-1

    我不知道这个问题是否是老问题 但我尝试了所有方法都没有成功 在输入字段中选择字母 n 时出现的问题 光标跳转到 n 1 包含视频中显示的问题 仅在 RTL 中存在问题 该链接包含问题的代码和视频 代码 链接在这里 https github
  • 在 Bootstrap 模式窗口中打开远程内容

    我所需要的只是一个简单的示例 说明如何将远程内容打开到 Twitter Bootstrap 模式窗口中 我正在使用 Bootstrap v2 0 4 但我无法让它工作 我可以打开常规模式窗口 但无法让它打开其中的远程文件 首先 远程数据必须
  • Angular 2 insideHTML 忽略表单标签

    我正在为 Angular 2 构建一个模态 因为没有像 Angular 1 x 这样的原生模态 而且我取得了很好的进展 我创建了一个模态组件 可以显示和隐藏 并且有一个主体输入唯一不起作用的是 由于某种原因 表单元素被从渲染的 html 中
  • 对于哪些 flutter 小部件我们需要使用 const?

    我了解的好处const并且小部件不会在状态更改时重建 但当您看到下面的代码时 仍然很明显它们是常量 我希望 flutter 自动处理它 或者 flutter 已经在处理它而我却没有意识到 This makes sense to me but
  • Dart:快照与 AOT

    我正在搜索很多关于这种伟大语言的信息 并找到了这个页面https github com dart lang sdk wiki Snapshots https github com dart lang sdk wiki Snapshots但它
  • Flutter:未捕获的 ReferenceError:firebase 未定义

    我在 Flutter Web 应用程序中使用 Firebase 服务 但在加载 Firebase 脚本时遇到问题 当我使用扑动时运行 d chrome我看到有错误的空白页面 重新加载页面后加载正常 当我进行 flutter build we
  • 在模态中打开模态

    我有一个有角度的 ui 模态 其中有一个按钮 单击此按钮时 我想在 Angular ui 中打开另一个模式 我该怎么做 scope open function var modalInstance modal open templateUrl
  • 如何在 Flutter 移动端、网页端和窗口端添加条件导入?

    我有 flutter 应用程序 它为每个平台 移动 网络 窗口 使用不同的 webview 插件 虽然我有能力import平台基于web and mobile 我无法导入 Windows 版本 如果不是移动或网络 我尝试添加其他条件 但它需
  • 如何在 Flutter/Dart 中使用带有基类的 Provider

    我有这样的基类和派生类 abstract class A extends ChangeNotifier class B extends A 我正在使用这样的提供者 ChangeNotifierProvider b create contex
  • Flutter:从子级检索顶级状态返回 null

    我正在尝试使用 of 方法获取应用程序的顶级状态 类似于 Scaffold of 函数 这是 精简的 代码 class IApp extends StatefulWidget override IAppState createState g
  • Flutter 命令删除 .pub-cache 文件夹中的包

    如何删除flutter包 pub cache文件夹 当我们给予flutter clean 它将删除当前目录中的build文件夹 我们可以手动删除 但是我的要求是删除里面的包 pub cache使用命令的文件夹 要清除全局 PUB CACHE
  • 没有为类型“Object”定义运算符“[]”。尝试定义运算符“[]”

    我的代码在下面给出了我在这一行中从 firebase 访问用户名时遇到的问题的错误 snapshot data username 它给出了上面提到的错误 我知道访问地图数据的唯一方法是这个 FutureBuilder future Fire
  • 如何使用数据表在按钮单击时显示带有列数据的确认模态

    有了下面的数据表 我想在单击按钮时显示动态弹出窗口或模式 这将用作确认模式 The modal should contain data coming from the columns in the respected row in whic
  • 尝试将 Flutter 应用上传到 ItunesConnect 时出现 UIWebView 错误

    我正在尝试将我的应用程序上传到应用程序商店 但是我不断收到错误消息 表明我的应用程序存在此问题 ITMS 90809 已弃用的 API 使用 不再接受使用 UIWebView 的新应用程序 相反 使用 WKWebView 可以提高安全性和可
  • React + Semantic-UI:在 UI MODAL 中使用表单

    在没有 React 的普通旧 Semantic UI 中 我已经能够毫无问题地将表单放入 Modal 中 使用 Semantic UI React 版本 我能够在模态中显示表单 但它并没有按照我期望的方式工作 例如 模态框显示后 模态框内的
  • 颤振动态形式无法正常工作

    在我的应用程序中 我想创建一组动态表单 用户可以在其中添加更多项目 在这种动态形式中 它由两个文本字段 1 电话字段 2 电子邮件字段和一个下拉字段组成 但我尝试的任何事情都无法正常工作 我已经要求修复我的代码 但没有得到答复 堆栈溢出问题
  • 在 Flutter 中使用 Expansion Tile 和 ListView

    我正在尝试从此构建应用程序image https i stack imgur com gJNkO png 但是当我将 ListView 与此扩展图块放在同一页面中时 屏幕变为空 I added shrinkwrap true并工作了 但现在
  • 如何为发布而不是调试创建密钥库?扑

    我按照使用此网站部署 flutter 的步骤进行操作https flutter io android release https flutter io android release 当我运行 flutter build apk 时出现此错

随机推荐

  • 在新的命名空间中定义简单类型,例如 xsd:string?

    这应该是直截了当的 但在我看来 它似乎只包含有关复杂类型的信息 假设我已经定义了一个名称空间xmlns address http 现在 从我读到的内容来看 我似乎可以执行以下操作
  • React useState - 每个组件使用一个状态还是多个状态? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 使用 Hooks Functional 组件来优化 React 并使代码更具可读性的更好方法是什么 每个组件有一个或多个 setState 钩子
  • 拉伸图像以适合 td

    我想在我的 td 单元格中拉伸图像 怎么做 它是一个选项卡图像 看起来像 的倒置 我需要将图像放置在第一个 td 单元格中 其中包含文本 aaa 将位于该图像的中心 如果不使用 CSS3 则无法拉伸背景图像 In CSS3你有背景大小属性
  • 如何解决Jboss部署错误?

    17 19 30 298 ERROR ProfileServiceBootstrap Failed to load profile Summary of incomplete deployments SEE PREVIOUS ERRORS
  • 使用 ObjectInputStream 读入的对象在 try-catch 块后不保留值

    因此 我将 Car 对象数组写入文件 然后当我尝试在 cars 变量中读回它们时 我在语句上设置了它们cars Car in readObject 但是 当我使用调试器单步调试它时 一旦退出 try catch 块 汽车变量就会 取消设置
  • 从命令行获取所有打开的窗口的列表

    在Windows 7中 是否可以从命令行获取所有打开的桌面窗口的列表 我知道有可能获得所有正在运行的进程的列表 https stackoverflow com questions 53489 how do you list all proc
  • 如何恢复已删除的 Facebook 应用程序?

    我的一位管理员已删除该应用程序 有什么办法可以恢复吗 我如何联系 Facebook 的开发人员 您可以通过进入您的开发者帐户请求来恢复已删除的 Facebook 应用程序 https developers facebook com appe
  • 如何解决“链接器命令失败,退出代码 1”问题?

    我正在尝试使用OMPTrace这是一个追踪和可视化的工具OpenMP程序执行如下所示https github com passlab omptrace https github com passlab omptrace 中给出的代码exam
  • 这两个类都支持封装吗?...?

    public class Normal public string name name is public public String getName return name public String setName String new
  • 使用级联 true 保存实体的 TypeORM 问题

    我正在将 NestJS 与 TypeORM 结合使用 并尝试保存用户与消息的对话 我将对话实体上的消息字段设置为级联 真 但是当我尝试这段代码时 const user3 User login admin createdBy system l
  • Vue.js/Nuxt.js 在 404 上加载后备图像

    我正在尝试设置默认图像 占位符图像 以防找不到图像资源 404 我有一篇字典文章 其中包含键author image 的值 所以该字符串不为空 但它只是无法加载该图像 在我的模板中 img alt Author Image 在我的方法中 m
  • jQuery 的 next() 作用于不相邻的元素

    我必须处理一些可怕的代码 div class container tr td width 100 height 50 a class swaps img src http www blah jpg alt Some Title a td t
  • Android 中的 Log4j 实现

    我是 android 开发新手 我想将日志写入 SD 卡中的一个文件 我如何使用 Log4j 来做到这一点 实现 Log4j 的所有步骤是什么 我读了很多文章 但没有一个描述如何配置和任何人都可以用简单的语言解释一下如何在 android
  • 如何在启动Spark Streaming进程时加载历史数据,并计算运行聚合

    我的 ElasticSearch 集群中有一些与销售相关的 JSON 数据 我想使用 Spark Streaming 使用 Spark 1 4 1 通过 Kafka 动态聚合来自我的电子商务网站的传入销售事件 以获得用户总金额的当前视图销售
  • Vue.js 自动转换 HTML 和 Unicode 实体

    我正在使用开放的 Google Books API 构建一个简单的图书浏览应用程序 问题在于 API 响应中存在引号和 unicode 实体 现在 在渲染时 Vue js 会将引号转换为 HTML 实体 并且在将 unicode 转换回文本
  • 如何在 Yocto Linux 中禁用虚拟终端

    有谁知道如何禁用linux中的虚拟终端吗 我在 i MX6 处理器上使用 Yocto Morty 版本 尽管我们的基础发行版是 Yocto 但不幸的是我们已经偏离了用配方构建它 所以这比 Yocto 更像是一个直接的 Linux 问题 详细
  • 使用 PyTorch 直接将数据加载到 GPU 中

    在训练循环中 我将一批数据加载到 CPU 中 然后将其传输到 GPU import torch utils as utils train loader utils data DataLoader train dataset batch si
  • 按字母顺序比较 2 个字符串以进行排序

    我正在尝试按字母顺序比较两个字符串以进行排序 例如 我想要进行布尔检查 例如if aaaa lt ab 我尝试过 但它没有给我正确的结果 所以我想这不是正确的语法 如何在 jquery 或 Javascript 中执行此操作 您确实说比较是
  • 无法在 Android Studio 2.3.3 中解析“com.google.firebase:firebase-messaging:11.0.4”

    我想在 Android studio 上设置一个 firebase 云消息客户端应用程序 我正在使用最新版本的 Android studio 2 3 3 并且我的 android SDK 已完全更新 这是我的项目 gradle 文件 bui
  • 部分可见的底部工作表 - 颤动

    在颤振中是否可以在初始状态下部分查看底部工作表 然后能够展开 关闭 我提供了 Google 地图实现的示例的屏幕截图 Use the DraggableScrollableSheet小部件与Stack widget 这是gist https