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

请在flutter中创建一页内的两个列表视图

在Flutter中创建一页内的两个列表视图,可以使用ListView和GridView来实现。

ListView是一个滚动的列表视图,可以垂直或水平滚动。要在Flutter中创建一页内的两个ListView,可以将它们放在一个Column中,每个ListView占据Column的一部分。以下是一个示例代码:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Two ListViews'),
        ),
        body: Column(
          children: [
            Expanded(
              child: ListView.builder(
                itemCount: 10,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text('Item $index'),
                  );
                },
              ),
            ),
            Expanded(
              child: ListView.builder(
                itemCount: 5,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text('Another Item $index'),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在上面的示例中,我们使用了两个Expanded小部件来确保每个ListView占据相等的空间。您可以根据需要调整Expanded小部件的大小。

GridView是一个网格视图,可以在一页内显示多个项目。要在Flutter中创建一页内的两个GridView,可以将它们放在一个Column中,每个GridView占据Column的一部分。以下是一个示例代码:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Two GridViews'),
        ),
        body: Column(
          children: [
            Expanded(
              child: GridView.builder(
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                ),
                itemCount: 10,
                itemBuilder: (context, index) {
                  return GridTile(
                    child: Container(
                      color: Colors.blue,
                      child: Center(
                        child: Text('Item $index'),
                      ),
                    ),
                  );
                },
              ),
            ),
            Expanded(
              child: GridView.builder(
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                ),
                itemCount: 5,
                itemBuilder: (context, index) {
                  return GridTile(
                    child: Container(
                      color: Colors.green,
                      child: Center(
                        child: Text('Another Item $index'),
                      ),
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在上面的示例中,我们使用了两个Expanded小部件来确保每个GridView占据相等的空间。我们还使用了SliverGridDelegateWithFixedCrossAxisCount来指定每行的项目数量。

这是在Flutter中创建一页内的两个列表视图的基本方法。您可以根据自己的需求进行调整和定制。

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

相关·内容

Flutter 1.17版本重磅发布

这些都是庞大数字,在此充满挑战时刻,我们由衷感谢大家辛勤工作和不断贡献。 如果您对我们在此版本合并PR完整列表感兴趣,则可以在flutter.dev网站上查看。...有关更多详细信息,请在Flutter Wiki上查看iOS上Metal常见问题。...在此版本,我们已完成了全部工作,包括滚动,文本字段和其他输入小部件辅助功能修复。您将在GitHub上看到此发行版关闭可访问性问题完整列表。...在此版本,-flux创建--androidx标志现在是唯一可用选项。虽然可以继续使用Flutter编译不使用AndroidX现有应用程序,但现在是迁移到新库绝佳时机。...通过较小团队和全新Flutter代码库,他们能够比以前更快地重建应用并交付到两个应用商店,从而使MGM预订转换率提高了9%。

2.5K10

革命性移动端开发框架-Flutter时间简史

2018.12 - Flutter1.0发布,它发布将大家对Flutter学习和研究推到了一个新起点 2019.2 - Flutter1.2发布主要增加对web支持 由此开看:Flutter在逐渐走向成熟和壮大...Flutter技术栈 (高清思维导图请在公众号会话回复“f1”) 该如何学习Flutter?...,工具问题,版本问题 Flutter入门:快速上手Flutter开发 Dart基础知识 什么是声明式UI Flutter入门基础知识 项目结构、资源、依赖和本地化 认识视图(Views) 布局与列表 状态管理...JSON解析与复杂模型转换实用技巧 基于shared_preferences本地存储操作 Flutter进阶提升:玩转列表组件 基于ListView实现水平和垂直方式滚动列表 基于ExpansionTile...实现可展开列表 基于GridView实现网格列表 高级功能列表下拉刷新与上拉加载更多功能实现 Flutter进阶提升:Flutter,Native混合开发 Flutter混合开发流程与创建Flutter

1.6K20
  • 【老孟FlutterFlutter 2 新增功能

    此外,我们在flutter.dev上创建了一个新Ads页面,您可以在其中找到所有有用资源,例如插件实施指南,内嵌横幅和原生广告代码实验室,以及重叠横幅,非页广告和奖励视频广告代码实验室。...此功能称为Add-to-App,是在两个移动平台上重用Flutter代码同时仍保留现有本机代码库绝佳方法。但是,对于您那些人,我们有时会听到,不清楚如何将第一个屏幕集成到Flutter。...要启用此功能,请在Flutter Inspector启用“反转超大图像”。 图片发布 启用“反转超大图像”选项,以突出显示比需要放大图像大图像。...这只是Flutter DevTools 2更多新功能摘要: 在Flutter框架图中添加了平均FPS信息并提高了可用性 用红色错误标签在网络事件探查器调出失败网络请求 新内存视图图表更快,更小且更易于使用...路径列表

    7.9K20

    谷歌 Flutter 1.17 发布

    有关更多详细信息,请在Flutter Wiki上查看iOS上Metal常见问题。 材质小部件:NavigationRail,DatePicker等 改进了Flutter实施材料设计系统。...在与Flutter 1.17相同时间范围但带外交付,Flutter团队还交付了新Animations软件包,该软件包提供了实现新Material motion规范预构建动画。...来自Animations包Container转换示例 在“实现运动”博客文章,材料设计团队定义了四个过渡模式,用于描述组件和全屏视图之间动画:容器变换,共享轴,淡入和淡入。...在此发行版,已完成了全部工作,包括滚动,文本 字段和其他输入小部件可访问性修复程序。您将在GitHub该版本中看到有关可访问性问题完整列表。...通过较小团队和全新Flutter代码库,他们能够比以前更快地重建应用并交付到两个应用商店,从而使MGM预订转换率提高了9%。

    3.5K10

    Flutter技术与实战(5)

    Flutter 提供了一种轻量级方法,让我们可以创建原生(Android 和 iOS)视图,通过一些简单 Dart 层接口封装之后,就可以将它插入 Widget 树,实现原生视图Flutter...; 然后,原生代码侧将对应原生视图创建交给平台视图工厂(PlatformViewFactory)实现; 最后,在原生代码侧将视图标识符与平台视图工厂进行关联注册,让 Flutter 发起视图创建请求可以直接找到对应视图创建工厂...* 首先,我们需要分别为新闻列表与新闻详情创建两个可重用独立区块。...在这两个文件,我们会使用不同配置数据来对 AppConfig 进行初始化,同时把应用程序实例 MyApp 作为其子 Widget,这样整个应用都可以获取到配置数据。...,这样被遮挡 Widget 部分区域就不需要绘制了; 对列表采用懒加载而不是直接一次性创建所有的子 Widget,这样视图初始化时间就减少了。

    15.8K30

    使用 Android Studio 进行 Flutter 开发

    创建新项目 使用 Futter 应用模板创建 Flutter 项目: 在 IDE ,点击 Welcome 窗口,或者主窗口File > New > Project Create New Project...” 从现有源码创建新项目 创建包含现有 Flutter 源码Flutter 项目: 在 IDE ,点击 Welcome 窗口,或者主窗口File > New > Project Create...“如果将你 Flutter 应用运行在 Web 平台,但是你没法找到 Chrome (web) 这个设备的话,请先确保你已经开启了 Web 支持, 请在这个文档里查看更多:使用 Flutter 构建...显示性能数据 “检查 Flutter性能问题,请查看时间线视图文档。...在进行操作之前,请确保你使用是最新版本 Android Studio 和 Flutter 插件。 在“项目视图,你可以在 flutter 应用根目录下看到一个 android 子目录。

    6.3K30

    Flutter 实践 MVVM

    Model好说,普通对象嘛,顶多处理一下序列化问题。 在Flutter,一切UI皆Widget,那么View层也很明确了,就是Widget部分。...iOS里,也可以通过ReactiveCocoa来实现数据双向绑定。 而在Flutter,我们可以借助Stream&Sink来实现数据变更通知,StreamBuilder来做View层绑定。...从编码角度来说,就是Sink对象add数据,然后对应Stream对象就会收到这些数据。 其实就是一个轻量级数据通知机制,有了这两个类支持,我们就可以做数据响应式传输了。...因为只是做一个列表页,模型层其实就是很简单两个对象。...注释(4)(5)这两个方法是网络请求,分别实现了刷新和加载下一页逻辑。可以看到,这里请求回来后,做就是把结果add到inStoryListController这个Sink对象

    10.1K70

    干货 | Flutter在携程复杂业务高性能之旅

    2.5 缓存高层级组件 复杂页面,页面级每个模块都是独立组件,每次刷新页面把所有的子组件都重新渲染一遍,性能开销非常大。尽量复用,避免不必要视图创建。List 缓存高层级组件。...创建一个线程会增加2MB左右内存,尽可能还是避免滥用导致内存开销。...,处理展示列表页数据 return; } } // 正常加载数据} 4.3 分页预加载 通常情况下当用户滑动到底部时候才会去加载下一页数据,这样用户要花费等待加载时间,影响用户体验...可以采用剩余法预加载数据,当用户滑动到剩余一定数量酒店时,开始加载下一页数据,在网络良好情况下,滑动场列表界面,界面基本不会存在等待加载时间。...延时加载:在很多场景,如酒店列表,酒店详情头部轮播图,第一次只需要加载首屏数据,就可以对非首屏数据进行延迟加载,避免加载瞬时资源竞争,优先保证重要资源加载,实现良好加载体验。

    1.5K20

    Flutter 1.22 正式发布

    在此版本Flutter,我们很高兴地宣布,我们对框架进行了强化,足以将这两个插件声明为可以投入生产。 ?...webview_flutter插件支持新Android平台视图模式,但当前需要手动启用。一旦在更广泛社区得到更多使用,我们将默认在将来版本启用它。...如果您想使用平台视图在iOS或Android上托管自己本机UI组件,则可以了解如何在使用平台视图Flutter应用托管本机Android和iOS视图上。...但是,与在ColorListScreenbuild方法创建Container列表不同,该堆栈对您隐藏。...EasyA联合创始人Phil Kwok 重大变化 与往常一样,我们试图将重大更改数量保持在最少。以下是Flutter 1.22版本列表

    7.5K20

    Flutter Hooks 使用及原理

    前言 Hooks,直译过来就是"钩子",是前端React框架加入特性,用来分离状态逻辑和视图逻辑。现在这个特性并不只局限在于React框架,其它前端框架也在借鉴。...为什么引入Hooks 我们都知道在FLutter开发一大痛点就是业务逻辑和视图逻辑耦合。这一痛点也是前端各个框架都有的痛点。...所以大家就像出来各种办法来分离业务逻辑和视图逻辑,有MVP,MVVM,ReactMixin,高阶组件(HOC),直到Hooks。...Flutter中大家可能对Mixin比较熟悉,我之前写过一篇文章介绍使用Mixin这种方式来分离业务逻辑和视图逻辑。 Mixin方式在实践也会遇到一些限制: Mixin之间可能会互相依赖。...大前端趋势就是各个框架技术理念相互融合,我希望通过阅读本文也能使大家对Hooks技术在Flutter应用有一些了解。如果文中有什么错漏之处,抑或大伙有什么想法,都请在评论中提出来。

    2.4K30

    为什么说Flutter让移动开发变得更好?

    让我们从在Android构建此列表所需步骤开始: 用XML创建list-item布局文件 创建一个适配器来绑定视图并设置数据 为列表创建布局(可能在Activity或Fragment) 填充Fragment.../Activity列表布局 在Fragment / Activity创建适配器,布局管理器等实例 在后台线程上从网络下载电影数据 回到主线程设置适配器项目 现在需要考虑保存和恢复列表状态等细节...使用这个,我们可以检索一个电影,给定Future结果列表,快照,并创建一个MovieListItem-Widget(在步骤1创建),并将该电影作为构造函数参数。...这两个类与API调用结合起来会有以下结果: 这貌似太简单了……现在有没有感觉到用Flutter创建列表很容易,继续探索吧。 下一步我们尝试稍微复杂布局。...不再有多余样板代码 。 既然两个app功能几乎一样,我就比较好奇两种不同语言实现代码量。 那么应该如何进行对比?(免责声明:Flutter版本还没有实现持久化,原生代码写也很乱)。

    2K10

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

    它可用于创建适应不同屏幕尺寸和尺寸灵活且响应迅速 UI 设计。ConstraintLayout 允许您根据与布局其他视图空间关系为每个视图指定位置和大小。...在 Android ,要在单个屏幕上显示多个 UI 视图,您可以使用 Fragments,它们就像可以在应用程序 Activity 运行可重用组件。...在 iOS ,UISplitViewController以分层界面管理子视图控制器,用于控制多个视图控制器。现在,让我们继续讨论 FlutterFlutter 引入了[ ?widgets概念。...可以看到,在 Flutter 创建拆分视图真的很容易。您只需使用 a 将它们并排放置Row,然后,为了填满整个空间,只需使用Expanded小部件包装两个视图。...创建了一个完全响应应用程序。

    2.8K10

    Flutter完整开发实战详解(二十、 Android PlatformView 和键盘问题)

    在 iOS 平台上就不使用类似 VirtualDisplay 方法,而是通过将 Flutter UI 分为两个透明纹理来完成组合:一个在 iOS 平台视图之下,一个在其上面。...但是,Android 平台并不支持这种模式,因为在 iOS 上框架渲染后系统会有回调通知,例如:当 iOS 视图向下移动 2px 时,我们也可以将其列表所有其他 Flutter 控件也向下渲染 2px...2.1.1、解决方法 AndroidView 使用 Flutter Framework 点击测试逻辑来检测用户触摸是否在需要特殊处理区域。...为了进一步解决这个问题,Flutter 创建了一个 Context 子类, 该子类返回内容与 Flutter View IMM 相同,这样就不会需要在查询 IMM 时需要返回真实 Window...在代理线程,返回 Flutter View 以创建输入。。 WebView 失去焦点时,将输入连接重置回 Flutter 线程。这样可以防止文本输入“卡”在 WebView

    13.4K20

    干货 | 携程火车票Flutter最佳实践

    2)控制刷新范围与次数 尽量避免在滑动监听触发setStat()刷新视图。 ? 如上图所示,需要滑动过程,显示、隐藏标题栏,并且是一个渐变过程,遇到这种情况,一定要尽量控制刷新范围和频次。...如上图所示在列表 Item 存在大量倒计时。一定要控制刷新倒计时只影响控件本身,并且只有可视区域视图是在刷新,不可见情况下及时销毁计时器。一直刷整个列表,性能开销是恐怖。...尽量复用,避免不必要视图创建。...refreshPage) { return widgets; } } 四、Flutter 布局技巧 4.1 Flutter 不可见组件预加载 Flutter 一些组件基本都是有懒加载,不可见组件是没有渲染视图...比如当你滑动到第五个可见时候,就提前把下一页数据加载好。 列表页通过桥方法获取上一个页面预加载数据,这样就能有一个直出体验,这里要考虑数据已经加载好、加载、加载失败情况。

    2.2K30

    鸿蒙开发之android开发人员指南《基础知识》

    鸿蒙应用也使用了声明式UI,作为大前端主流开发方式,例如swiftUI、JetPack Compose、Flutter等。...WindowStage创建完成后会进入onWindowStageCreate()回调,可以在该回调设置UI界面加载、设置WindowStage事件订阅。...可以在onForeground()回调申请系统需要资源,或者重新申请在onBackground()释放资源。...例如调用terminateSelf()方法停止当前UIAbility实例,从而完成UIAbility实例销毁;或者用户使用最近任务列表关闭该UIAbility实例,完成UIAbility销毁。...: RouterOptions ): void返回上一页面或指定页面clear(): void清空页面栈所有历史页面,仅保留当前页面作为栈顶页面getLength(): string获取当前在页面栈页面数量

    21520

    UITableView在Flutter是什么?

    这样需求,在iOS是用UITableView实现;而在Flutter,实现这种需求则是列表控件ListView。...ListView 在Flutter,ListView可以沿一个方向(垂直或者水平方向)来排列其所有子Widget,因此常被用于需要展示一组连续视图元素场景,比如通讯录、优惠券、商家列表等。...ListView另一个构造函数ListView.builder,则适用于子Widget比较多场景,这个构造函数有两个关键参数: itemBuilder,是列表创建方法。...我定义了一个拥有100个列表元素ListView,在列表创建方法,分别将index值设置为ListTile标题与子标题。...总结 在处理展示一组连续、可滚动视图元素场景Flutter提供了比原生Android、iOS系统更为强大列表组件ListView与CustomScrollView。

    5.6K10

    Flutter 混合开发】添加 Flutter 到 iOS

    .ios 是隐藏目录,可以单独运行Flutter module,测试此模块功能,iOS代码添加到现有应用程序项目或插件,而不是添加到模块.ios /目录。...为Flutter引擎,已编译Dart代码和所有Flutter插件创建 frameworks。手动嵌入 frameworks,并在Xcode更新现有应用程序构建设置。...修改iOS应用程序 Podfile 文件,如果没有则手动创建,内容如下: flutter_application_path = '.....当在my_flutter / pubspec.yaml更改Flutter插件依赖性或者第一次运行时,请在Flutter模块目录运行flutter pub get来刷新podhelper.rb脚本读取插件列表...Dart VM以及何时Flutter不需要在视图控制器之间保持状态,则这可能很有用。

    3.2K40

    初学者 Flutter bloc

    它很强大,因为它可以帮助你创建所有类型应用,比如,你可以创建以学习为目的应用,或者创建在生产环境中使用复杂应用,Flutter Bloc 都可以应用。...当我们使用 Flutter Bloc,我们要在应用创建事件触发交互,然后 Bloc 会发射 emit 请求数据,存在在 state ,在真实场景,它会像这样: 用户点击按钮来获取游戏列表 事件被触发...比如,如果 Bloc 发射一个成功状态,视图将根据返回游戏列表重新构建,但是如果返回状态是错误视图会根据错误信息或者我们要展示其他内容来重新构建。...这个案例,我们创建下面代码结构: 正如我们在 home 挂件文件夹中所看到之前提及那样。...方法来创建游戏列表副本。

    15610

    Flutter技术与实战(4)

    RenderObject RenderObject 是主要负责实现视图渲染对象。 Flutter 通过控件树(Widget 树)每个控件(Widget)创建不同类型渲染对象,组成渲染对象树。...在 Flutter ,布局和绘制工作实际上是在 Widget 另一个子类 RenderObjectWidget 完成。...State 生命周期可以分为 3 个阶段:创建(插入视图树)、更新(在视图存在)、销毁(从视图移除)。接下来,我们一起看看每一个阶段具体流程。...这就对应着按钮控件两个最重要参数了: onPressed 参数用于设置点击回调,告诉 Flutter 在按钮被点击时通知我们。...ListView 另一个构造函数 ListView.builder,则适用于子 Widget 比较多场景。这个构造函数有两个关键参数: itemBuilder,是列表创建方法。

    10.8K20
    领券