首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在可滚动的小部件中包装StaggeredGridView和Row?

在Flutter中,可以通过将StaggeredGridView和Row组合在一个可滚动的小部件中来实现。下面是一个示例代码:

代码语言:txt
复制
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('StaggeredGridView with Row'),
        ),
        body: SingleChildScrollView(
          child: Column(
            children: [
              StaggeredGridView.countBuilder(
                shrinkWrap: true,
                physics: NeverScrollableScrollPhysics(),
                crossAxisCount: 2,
                itemCount: 10,
                itemBuilder: (BuildContext context, int index) {
                  return Container(
                    color: Colors.blue,
                    height: 200,
                    child: Center(
                      child: Text('Item $index'),
                    ),
                  );
                },
                staggeredTileBuilder: (int index) =>
                    StaggeredTile.count(1, index.isEven ? 1.2 : 1),
                mainAxisSpacing: 8.0,
                crossAxisSpacing: 8.0,
              ),
              Row(
                children: [
                  Expanded(
                    child: Container(
                      color: Colors.red,
                      height: 100,
                      child: Center(
                        child: Text('Row Item 1'),
                      ),
                    ),
                  ),
                  Expanded(
                    child: Container(
                      color: Colors.green,
                      height: 100,
                      child: Center(
                        child: Text('Row Item 2'),
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个示例中,我们使用了StaggeredGridView.countBuilder来创建一个可滚动的网格视图,其中包含10个项目。我们将shrinkWrap属性设置为true,以便在包装小部件中正确处理滚动。我们还使用NeverScrollableScrollPhysics来禁用网格视图的滚动,以便整个页面可以滚动。

在网格视图的下方,我们使用Row小部件创建了一个水平布局,其中包含两个具有相同宽度的容器。这些容器可以根据需要进行自定义,并且可以包含任何其他小部件。

请注意,这只是一个示例,你可以根据自己的需求进行修改和扩展。关于StaggeredGridView和Row的更多信息,你可以参考以下链接:

  • StaggeredGridView - 一个Flutter插件,用于创建可滚动的交错网格视图。
  • Row - 一个Flutter小部件,用于在水平方向上排列子小部件。

希望这个答案能够满足你的需求!

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter构建布局 顶

这些小部件安排在ListView,而不是列,因为在设备上运行应用程序时,ListView会自动滚动。...如果您愿意,可以构建仅使用小部件标准小部件应用程序。 如何在Flutter布置单个小部件? 本节介绍如何创建一个简单部件并将其显示在屏幕上。...内容 对齐小部件 调整小部件 包装部件 嵌套行列 要在Flutter创建行或列,可以将一个子窗口小部件列表添加到Row或Column窗口小部件。...以下示例显示如何在行或列内嵌套行或列。 此布局按行组织。 该行包含两个孩子:左侧一列右侧图片: ? 左列部件树嵌套行列。 ? 您将在嵌套行实现一些Pavlova布局代码。...标准小部件 Container: 向边框添加填充,边距,边框,背景颜色或其他装饰。 GridView: 放置小部件作为滚动网格。 ListView: 将小部件列为滚动列表。

43.1K10

Flutte部件目录-基本部件(一)

这些属性文档中所述,marginpadding属性也会影响布局。 (它们效果只是丰富了上述规则。)...Row部件不会滚动(并且一般认为在一行中有更多孩子比适合可用房间更好是错误)。如果您有一行小部件,并希望它们在空间不足情况下能够滚动,请考虑使用ListView。...解决方法是将第二个孩子包装在Expanded部件,该部件告诉行该子部件应该给予剩余房间: new Row( children: [ const FlutterLogo(),...inherited Column 以垂直阵列显示其子项部件。 要让子部件扩大以填充可用垂直空间,请将该子部件包装在Expanded部件。...在这种情况下,解决方案通常只是将内部列包装在Expanded,以表明它应该占用外部列剩余空间,而不仅仅是它需要空间。 显示此消息另一个原因是将列嵌套到ListView或其他垂直滚动

7.5K20
  • 用flutter_staggered_grid_view实现分页瀑布流效果【flutter20个实例之四】

    二、讲解 1.前言的话 GridView是一个滚动,2D数组控件可以用这个组件实现滚动效果,但是它渲染高度是一样。...2.5 : 3)), ), ), ], )) 5.六种创建方式属性 StaggeredGridView.countStaggeredGridView.extent,前者创建了一个纵轴方向固定...StaggeredGridView.extentBuild,这两个跟上面的含义差不多,区别在于适合子Widget数量比较多需要动态创建情况 更高级还有StaggeredGridView.builder...StaggeredGridView.custom,区别在于创建方式不同,而且也更加灵活 StaggeredTile.count:固定纵轴主轴上数量 StaggeredTile.extent...:纵轴上数量主轴上最大范围 StaggeredTile.fit:纵轴上数量 StaggeredGridView有几列是由crossAxisCount除以StaggeredTile设置上纵轴数量结果

    3.5K30

    开始使用-编写你第一个Flutter应用程序 顶

    这是创建您第一个Flutter应用程序指南。 如果您熟悉面向对象代码基本编程概念(变量,循环条件),则可以完成本教程。 您不需要以前使用Dart或移动编程经验。...第1步:创建起始Flutter应用程序 第2步:使用外部包装 第3步:添加一个有状态部件 第4步:创建一个无限滚动ListView 第5步:添加交互性 第6步:导航到新屏幕 第7步:使用主题更改UI...Center小部件将其小部件子树对齐到屏幕中心。 第2步:使用外部包装 在这一步,您将开始使用名为english_words开源软件包,其中包含数千个最常用英文单词以及一些实用功能。...lib/main.dart 第6步:导航到新屏幕 在这一步,您将添加一个显示收藏夹新屏幕(在Flutter称为路由)。 您将学习如何在主路由新路由之间导航。...实现一个有状态部件,为你应用增加交互性。 用ListViewListTiles创建一个延迟加载无限滚动列表。 创建了一条路由并添加了在主路由新路由之间移动逻辑。

    9.5K20

    6详解AppBar小部件

    由于它是一个如此常用组件,因此 Flutter 为该功能提供了一个名为AppBar专用小部件。 在本教程,我们将通过一些实际示例向您展示如何在 Flutter 应用程序自定义 AppBar。...您可以使用它来显示图标、图像、形状或使用布局小部件(例如row任意组合column。...工具栏高度不透明度 最后,我们有工具栏属性。工具栏包含文字,图标,按钮,其他任何公司前景,除了小部件ContainerImage。...用来在 Toolbar 标题下面显示一个 Tab 导航栏 this.elevation,//控件 z 坐标顺序,默认值 4,对于滚动 SliverAppBar,当 SliverAppBar...内容同级时候,该值为 0, // 当内容滚动 SliverAppBar 变为 Toolbar 时候,修改 elevation 值。

    16.4K10

    肘子 Swift 周报 #038 | 更好还是更便宜?

    虽然 Apple 提供了数千个自定义和易于使用高质量图标,但在某些情况下,开发者可能仍需特定图标未能在现有集合中找到。...在这篇文章,Danijela Vrzan 介绍了如何在 Sketch 应用程序创建自定义 SF Symbols 图标。...本文不仅比较了 WebSocket 与其他实时通信技术( HTTP 长轮询、HTTP 流、Comet SSE)差异,还强调了这些方法在协议层面的局限性。...通过本文,读者将能够深入理解如何在 Swift 环境实施 WebSocket 通信,并掌握其技术优势及适用场景。...然而,与基于 AppDelegate 传统方法相比,ScenePhase 在处理应用启动终止等关键事件时显得力不从心。

    11510

    10 个派上用场 Flutter 小部件

    在今天文章,我将告诉你我希望早点知道最方便几个Flutter小部件。 Spacer Spacer 创建一个可调整空白空间,它占据 Flex 容器中小部件之间任何剩余空间,例如行或列。...SafeArea 此小部件为您部件添加填充,确保您应用不会与操作系统设备显示功能(状态栏)发生冲突。...SafeArea(child: Container()) RefreshIndicator 将可滚动部件作为一个孩子。...当孩子被过度滚动时,动画圆形进度指示器会淡入视图并调用未来来更新滚动内容。...Transform 这个小部件将您动画游戏提升到一个全新水平。它可以实现简单动画,旋转缩放到更复杂动画, 3D 倾斜动画。

    1.3K20

    flutter对列表性能优化

    当您滚动浏览此 UI 并注意该ColorBarState.build方法调用方式时,会出现可怕部分 。...每个内部列表包含 100 个元素,因此当 UI 加载时,您会立即看到 100 个“Building ColorBarState”实例打印到控制台, 更糟糕是,一旦向下滚动大约一百行,就会再生成一百行...使用 Slivers 列表列表 下面的代码构建了与之前相同 UI,但这次它使用Slivers 而不是收缩包装ListView对象。本页其余部分将引导您逐步完成更改。...运行应用程序并注意 Flutter 不再需要立即渲染 100 个 ColorRow 小部件。当您滚动时,会动态构建更多小部件,正如您所期望那样。...更好是,一直滚动到下一个列表也不会产生任何特殊费用。 Flutter 会根据需要重新构建小部件,而且很快。

    3.5K00

    Flutte部件目录-布局

    如果给定孩子,这个小部件强制它孩子有一个特定宽度/或高度(假设这个小部件父母允许这个值)。 如果宽度或高度为空,则此小部件将自行调整大小以匹配该维度子级大小。...Stack 如果你想以一种简单方式重叠几个子部件,这个类很有用,例如有一些文字图像,用梯度底部附加按钮叠加。 IndexedStack 显示一个子部件列表单个子部件堆栈。...GridView 滚动2D小部件阵列。 Flow 实现流布局算法部件。 Table 为其子项使用表格布局算法部件 Wrap 一个小部件,它以多个水平或垂直运行显示其子项。...ListBody 一个小部件,它沿着一个给定轴顺序排列它子元素,强制它们到另一个轴父元素维度。 ListView 滚动线性小部件列表。 ListView是最常用滚动部件。...它在滚动方向上一个接一个地显示其子项。 在交叉轴上,子部件们需要填充ListView。 CustomMultiChildLayout 一个使用代理来调整尺寸定位多个子项部件

    1.5K10

    StatefulWidget使用案例

    首先我们在VSCode安装一个名为“Awesome Flutter Snippets”插件,该插件提供了Flutter各种常用方法快速构建方式,可以极大地提升开发效率,如下所示: 捷径...自定义剪辑 用于创建自定义形状 customPainter 自定义画家 用于创建自定义绘画 listViewB ListView.Builder 创建按需创建滚动线性小部件数组...提供非null itemCount提高ListView估计最大滚动范围能力。 customScrollV 自定义ScrollView 创建ScrollView使用条子创建自定义滚动效果。...oriantationBldr 方向生成器 创建一个构建器,允许指定引用设备方向 layoutBldr 布局生成器 与Builder窗口小部件类似,只是框架在布局时调用构建器函数并提供父窗口小部件约束...inheritedW 继承部件 用于沿窗口小部件树传播信息类。 mounted 安装 此State对象当前是否在树

    3.3K20

    【译】W3C WAI-ARIA最佳实践 -- 布局

    当呈现内容是表格时,从 grid table 中选择实现模式时,考虑以下因素。 grid 是一个复合小部件,所以它: 始终包含多个聚焦元素。 在页面Tab序列只有一个聚焦元素。...grid 模式使用大致可分为两类:展示表格信息(数据表格)集合其他部件(布局栅格)。尽管数据网格布局栅格使用相同ARIA角色、状态属性,它们内容目的不同是考虑键盘交互设计重要因素。...Page Down: 以开发者设定行数移动焦点,一般滚动时,当前可见行集合最后一行会变为第一次滚动后可见行一行。...组合部件布局栅格 grid 模式可被用于组合一组交互元素,例如链接、按钮、复选框。由于整个网格只有一个元素包含在tab序列,所以使用网格进行分组可以显著减少页面上tab步骤。...如果存在某些行或列在DOM中被隐藏或不存在情况,例如当滚动时自动加载数据,或者网格提供了隐藏行或列功能,使用以下属性,grid and table properties 所述。

    6.1K50

    【Flutter】自定义滚动开关

    **我们将在flutter应用程序中使用lite_rolling_switch 包来实现一个自定义滚动开关演示程序,该程序具有吸引人动画一些属性。...假设此属性价值回报为true,则此开关为ON,为OFF则为false。当此属性无效时,开关小部件会失效。 该演示视频展示了如何在颤动创建自定义滚动开关。...它显示了自定义滚动开关如何在flutter应用程序中使用lite_rolling_switch包工作。...在小部件内,我们将添加一个列小部件。在此小部件,我们将添加mainAxisAlignment为center。在内部,我们将添加带有样式文本。...我们将添加animationDuration手段来延迟动画开始并添加onChanged表示用户打开或关闭开关时间。当我们运行应用程序时,我们应该获得屏幕输出,屏幕下方截图所示。

    33.4K60

    何在flutter构建响应式布局(第五节)

    在 Android ,要在单个屏幕上显示多个 UI 视图,您可以使用 Fragments,它们就像可以在应用程序 Activity 内运行重用组件。...小部件本质上是重用,因此您在 Flutter 构建响应式布局时无需学习任何其他概念。...Flutter 响应能力 正如我之前所说,我将介绍开发响应式布局所需重要概念,然后,您可以选择如何在应用程序实现它们。 1. 媒体查询 您可以使用?MediaQuery来检索?...扩展性灵活性 在 aColumn或 aRow特别有用部件是Expandedand Flexible。该?扩展插件扩展行,列孩子,或Flex使孩子充满可用空间,而?...可以看到,在 Flutter 创建拆分视图真的很容易。您只需使用 a 将它们并排放置Row,然后,为了填满整个空间,只需使用Expanded小部件包装两个视图。

    2.8K10

    目录

    使用框架小部件将小部件分配给框架 通过浮雕调整镜框外观 了解小部件命名约定 测验 使用几何管理器控制布局 .pack() .place() .grid() 测验 使你应用程序具有交互性 使用事件事件处理程序...Label,Button,Entry,Text小部件只是少数Tkinter提供部件。还有其他几种,包括复选框小部件,单选按钮,滚动进度条。...side关键字参数告诉Tkinter哪个方向来包装frame对象。在下一部分,你将了解有关其工作原理更多信息。...按下此按钮时,应该将标签值减小1。要执行此操作,需要知道两件事: 你如何在获取文字Label? 如何更新文字Label? Label小部件没有.get()喜欢Entry,Text小部件没有。...之后,你将构建一个文本编辑器,可以打开,编辑保存文本文件! 测验 练习:模拟滚动六边形模具显示隐藏 编写一个模拟滚动六面模具程序。文本应有一个按钮"Roll"。

    29.8K20

    Flutter你竟是这样布局

    它会依次询问子元素关于布局基本限制要求,让子元素上报期望布局结果,然后根据现状自己布局算法特点,告诉子元素应该放到那儿,占多大空间 由于父级大小位置又取决于其父级,因此在不考虑整个树情况下就无法精确定义任何小部件大小位置..., ] ) 当Row子Child被包裹在Expanded时,Row将不再让该Child定义自己宽度。 取而代之是,Row会根据所有ExpandedChild来计算其该有的宽度。..., ), ] ) 如果将所有Row子Widget都包装在Expeded,则每个Expeded大小均与其flex参数成比例,子Child会设置为计算Expanded宽度。...当然,屏幕是通过将tight constraint传递给Container来实现。 另一方面,宽松约束设置了最大宽度高度,但使小部件尽可能。...由于Column扩展了Flex,请导航至Flex源代码(也位于basic.dart)。 向下滚动直到找到一个名为createRenderObject()方法。

    2.3K20

    2021,17个 最流行 Vue 插件

    想在你Vue应用程序添加图表?可以看看 Chart.js。它是一个为设计师开发者提供简单而灵活 JS 图表库。它有许多漂亮图表类型可供选择。...特性 拖拽 可调整大小 静态部件(不可拖拽、调整大小) 拖拽调整大小时进行边界检查 增减部件时避免重建栅格 序列化还原布局 自动化 RTL 支持 响应式 Vue Draggable 地址:https...支持移动设备、拖拽选择文本、智能滚动,可以在不同列表间拖拽、不依赖 jQuery 为基础、vue2 过渡动画兼容、支持撤销操作,总之是一款非常优秀vue拖拽组件。...Trois.Js 是Three.js上面的一个包装器,因此不比原始库慢。它还通过自动处置几何体、材料、纹理、渲染器等来简化对象处置,这在原始库是不存在。...一个Vue组件,轻松设置滚动驱动交互(又称滚动讲演)。 在引擎盖下使用 Scrollama。

    4.3K10

    Python|GUI编程Entry部件详解

    一、Entry部件基本介绍 Entry小部件是Tkinter基本小部件,用于从应用程序用户获取输入,即文本字符串。这个小部件允许用户输入一行文本。...如果用户输入字符串比小部件可用显示空间长,则将滚动内容。这意味着不能看到字符串整体。箭头键可用于移动到字符串不可见部分。如果要输入多行文本,则必须使用文本小部件。...简而言之:get()方法就是我们要找。我们用两个按钮“退出”“显示”来扩展我们小脚本。...display.set(eval(display.get())) if__name__ == '__main__': Calculator().mainloop() 学会这个组件之后还能做更多有趣程序...,我会根据读者要求来更新更多tkinter相关内容,有读者想看什么有趣程序都可以留言告诉笔者,每周六就会更新本人原创文章。

    1.8K40
    领券