本节代码利用Flutter的ListView组件实现垂直/水平方向滚动的列表，效果图如下： ? ?...垂直方向的滚动： import 'package:flutter/material.dart'; void main() => runApp(MyApp()); const CITY_NAMES =...TextStyle( color: Colors.white, fontSize: 20, ), ), ); } } 水平方向滚动的列表只需要给...ListView添加scrollDirection属性，并设置为Axis.horizontal： import 'package:flutter/material.dart'; void main()
现如今打开一个 App，比如头条、微博，都会有长列表，随着我们不断地滑动，视窗内的内容也会不断地更新。今天就用 Flutter 实现一下这种效果。 ?...如果在 web 开发时，是需要容器加上样式 overflow: auto; 要想用 Flutter 实现，其实也是很简单的，因为 Flutter 为我们提供了 ListView 组件。...前者规定列表数目的多少，后者决定了每个列表如何渲染。...总结，上面主要讨论了 ListView 的几个构造函数及用法，讨论如何实现常见的滚动列表。 完成的代码，可见list_view.dart 。...最后 笔者最近在学习flutter，会持续地记录自己的学习过程，并放在 github 上。 以上就是本文的全部内容，希望对大家的学习有所帮助。
完整版脑图，后台回复 “Flutter” 关键字,关注 码个蛋(codeegg)会持续更新本系列文章. ?...// duration 表示切换滚动的时长，curve 表示滚动动画的样式， // flutter 已经在 Curves 中定义许多样式，可以自行切换查看效果...drawer: Drawer( // 记得要先添加 `SafeArea` 防止视图顶到状态栏下面 child: SafeArea( child:...bottomNavigationBar: BottomAppBar( shape: CircularNotchedRectangle(), child: Row(...电影 App 地址，含括常用功能：https://github.com/kukyxs/flutter_timer_movie
二、讲解（后附源码） 1.这里主要是用到GridView 组件 GridView是一个可滚动的，2D数组控件。...2.如果需要翻转滚动方向，比如从上到下，改为从下到上 需要设置属性：true表示翻转 reverse: false 3.如果需要横向滚动，设置以下属性 scrollDirection: Axis.horizontal...组件，增加一个padding 按Alt+Enter可以调出新增组件的快捷键，鼠标放在某个组件上，然后Alt+Enter可以给组件包裹一层padding 相关快捷键操作链接：Android Studio对flutter...80, color: Colors.primaries[i % Colors.primaries.length], ); }), ) 三、源码 import 'package:flutter...Padding( padding: const EdgeInsets.all(8.0), child: getItem(), )); } //列表
一个完整的Flutter项目是由这个主组件开始的。 MaterialApp属性详解 属性 类型 简述 home Widget 主页。...onUnknownRoute RouteFactory onGenerateRoute 无法生成路由时调用 navigatorObservers List 导航的监听器列表...Widget Material中所定义的FAB，是一个悬浮的功能按钮 floatingActionButtonLocation FloatingActionButtonLocation 设定悬浮按钮的位置...flexibleSpace显示在AppBar的下方，高度和AppBar高度一样，可以实现一些特殊的效果 [cf22fa2aav.png] 文档地址 示例 BottomAppBar BottomAppBar...全栈式开发之Dart 编程指南 [二维码] Flutter 全栈式开发指南 快速上手篇直接观看 [format,png]
参阅书籍： 《Flutter跨平台开发入门与实践》-- 向治洪（著） 6. 高级组件 6.1 可滚动组件 对于列表和长布局的显示溢出问题，可以使用Flutter提供的可滚动组件来处理。...,//是否是与父级关联的主滚动视图 this.physics,//设置滚动效果 this.controller,//控制滚动位置，当primary为true时，controller必须为null...控制滚动位置，当primary为true时，controller必须为null bool primary,//是否是与父级关联的主滚动视图 ScrollPhysics physics,/...NotificationListener组件支持的属性如下： pixels：当前滚动位置； maxScrollExtent：最大可滚动长度； extentBefore：距离滚出视图窗口顶部的长度； extentInside...：视图窗口内部长度，大小等于屏幕显示的列表长度； extentAfter：列表中未滑入视图窗口部分的长度； atEdge：是否滚动到了可滚动组件的边界。
在滚动发生变化而列表项又很多时，这样的计算就会非常频繁。 如果提前设置好itemExtent，ListView则可以计算好每一个列表项元素的相对位置，以及自身的视图高度，省去了无谓的计算。...ListView的组件控制器是ScrollController，我们可以通过它来获取视图的滚动信息，更新视图的滚动位置。...如下代码所示，我们声明了一个有着100个元素的列表项，当滚动视图到特定位置后，用户可以点击按钮返回到列表顶部： 首先，我们在State的初始化方法里，创建了ScrollController，并通过_controller.addListener...方法注册了滚动监听方法回调，根据当前视图的滚动位置，判断当前是否需要展示“Top”按钮。...总结 在处理展示一组连续、可滚动的视图元素的场景中，Flutter提供了比原生Android、iOS系统更为强大的列表组件ListView与CustomScrollView。
可以在其内部嵌套其他滚动视图的滚动视图，其滚动位置是固有链接的。...在普通的ScrollView中， 如果有一个Sliver组件容纳了一个TabBarView，它沿相反的方向滚动（例如，允许用户在标签所代表的页面之间水平滑动，而列表则垂直滚动），则该TabBarView...例如，浏览内部列表以滚动到顶部不会导致外部ScrollView中的SliverAppBar折叠以展开。...滚动隐藏AppBar 比如实现如下场景，当列表滚动时，隐藏AppBar，用法如下： NestedScrollView( headerSliverBuilder: (BuildContext context...controller为滚动控制器，可以监听滚到的位置，设置滚动的位置等，用法如下： _scrollController = ScrollController(); //监听滚动位置 _scrollController.addListener
例如, Chip 可用于根据应用程序中的当前上下文向用户显示可选建议的列表. ?...这样做时, 你需要将 ChipGroup 封装在滚动视图(如 HorizontalScrollView )中, 以便用户可以滑动正在显示的 Chip....BottomAppBar 可以通过类似于下面的方式添加到你的布局中: <android.support.design.bottomappbar.BottomAppBar android:layout_width...app:fabAlignmentMode: 声明已附加到底部应用栏的FAB的位置. 可以为 end: ? 或者是 center: ?...app:backgroundTint: 用于为视图的背景上色. 如果你想要设置视图的背景颜色, 那么应该用 android:background 属性. 这样会确保视图样式的稳定性.
在Flutter中，我们也有对应的列表Widget，就是ListView。 注意：在Flutter里面想要实现滑动效果，都需要在组件外部包裹滚动的视图。...当列表滚动到具体的index位置时，会调用该构建器构建列表项。 itemCount：列表项的数量，如果为null，则为无限列表。...Flutter中有一个可以完成这样滚动效果的Widget：CustomScrollView，其成员变量slivers可以接收一组Sliver，从而达到统一管理多个滚动视图的目的。...比如视图滚动到底部时，我们可能希望做上拉加载更多；比如滚动到一定位置时显示一个回到顶部的按钮，点击回到顶部的按钮，回到顶部；比如监听滚动什么时候开始，什么时候结束； 在Flutter中监听滚动相关的内容由两部分组成...ListView、GridView的组件控制器是ScrollController，我们可以通过它来获取视图的滚动信息，并且可以调用里面的方法来更新视图的滚动位置。
在 Flutter 视图布局（一）中文章结束时留下了一个问题，大家有尝试去实现吗？ 如果大家认真看文章的话，我觉得这并不是很难的东西。...简单来说（翻译一下），通常在可滚动列表的容器中子项都会被装在重绘边界之内，以便列表在滚动时不需要将它们进行重绘。...BouncingScrollPhysics 的话就是大家都熟悉的回弹效果了，当操作列表到达可视范围尽头时还可以继续超出一定的空间，当失去焦点后回到尽头的位置，这样就能给予用户一个良好的使用体验。...://api.flutter.dev/flutter/widgets/ScrollView/controller.html 相关文章 Flutter State x Widget Flutter 视图布局...-前言 Flutter 视图布局（一） 感谢大家的喜欢！
那么接下来就来看一看 Flutter 的视图布局吧。...01 - 视图的布局方式 简单说一下我对 Flutter 视图布局的看法，在前篇中我有提到 Flutter 是使用了 Dart 语言进行编写，所以弱化了视图编辑的部分，视图的渲染、结构、布局都通过代码逻辑来生成...多子类元素布局 多子类元素布局的 Widget 有10种： Row 在水平方向上排列子元素的列表。 Column 在垂直方向上排列子元素的列表。...ListView 可滚动的列表控件。ListView 是最常用的滚动 Widget，它在滚动方向上一个接一个地显示它的子元素。在纵轴上，子元素们被要求填充ListView。...每一种 Widget 都会影响其子元素最终的视图显示效果，如大小、位置、边框、背景等。
ScrollController的主要作用是控制滚动位置和监听滚动事件 child：子元素 import 'package:flutter/material.dart'; /** * @des Scroll...---- ListView（列表 View） ListView 可以构建一个列表视图 ListView({ Key key, Axis scrollDirection = Axis.vertical...指定 itemExtent 的值比让子元素决定自身长度在绘制时更高效，特别是在滚动位置频繁变化的状态下，因为设置 itemExtent 可以让滚动系统提前知道列表的长度。...：是否保存滚动位置 ScrollController.jumpTo(0.0)：直接滚动至指定位置 ScrollController.animateTo(0.0, duration: Duration...(milliseconds: 500), curve: Curves.decelerate)：带动画滚动至指定位置 import 'package:flutter/material.dart'; /*
值得注意的是，页面切换时，由于 State 对象在视图树中的位置发生了变化，需要先暂时移除后再重新添加，重新触发组件构建，因此这个函数也会被调用。...在滚动发生变化而列表项又很多时，这样的计算就会非常频繁。...但如果提前设置好 itemExtent，ListView 则可以提前计算好每一个列表项元素的相对位置，以及自身的视图高度，省去了无谓的计算。...以一个有着封面头图的列表为例，我们希望封面头图和列表这两层视图的滚动联动起来，当用户滚动列表时，头图会根据用户的滚动手势，进行缩小和展开。...通过 NotificationListener 则： 可以监听其子 Widget 中的任意 ListView； 不仅可以得到这些 ListView 的当前滚动位置信息，还可以获取当前的滚动事件信息 。
这个构造函数有两个关键参数： itemBuilder，是列表项的创建方法。当列表滚动到相应位置时，ListView 会调用该方法创建对应的子 Widget。...但对于定高的列表项元素，建议提前设置好这个参数的值。 但如果提前设置好 itemExtent，ListView 则可以提前计算好每一个列表项元素的相对位置，以及自身的视图高度，省去了无谓的计算。...如何快速回到列表顶部？列表滚动是否已经开始，或者是否已经停下来了？...ListView 的组件控制器则是 ScrollControler，我们可以通过它来获取视图的滚动信息，更新视图的滚动位置。.../** * 声明了一个有着 100 个元素的列表项，当滚动视图到特定位置后，用户可以点击按钮返回列表顶部： */ class MyAPPState extends State {
增强对 Material 3 的支持 在 Flutter 3.7 中，以下的 widget 已经进行了 Material 3 的适配： Badge BottomAppBar Filled and Filled...2.20.0 发行注记 自定义上下文菜单 从新版本开始，你可以在 Flutter 应用的任意位置创建自定义的上下文菜单，也可以自定义内置的上下文菜单。...你也可以使用 ContextMenuController 在应用内的任意位置展示平台默认或者自定义的上下文菜单。 若想查看完整的示例，前往 Flutter 示例代码仓库 了解更多。...CupertinoListTile widget Cupertino 系列 widget 迎来了两位新成员： CupertinoListSection 和CupertinoListTile，可用于展示 iOS 风格的滚动列表内容...最后，在 Flutter 视图不再展示时，也会 通知 Dart VM 进行处理，进一步优化了 Flutter 视图未显示时的内存占用。
本文实例为大家分享了flutter实现不规则底部导航栏的具体代码，供大家参考，具体内容如下 实现底部导航栏并点击切换页面可简述为有三种方式 TabBar + TabBarView BottomNavigationBar...+ BottomNavigationBarItem 自定义 BottomAppBar 在这里 使用 BottomAppBar 来实现 image.png /** * 有状态StatefulWidget...Scaffold( //对应的页面 body: pages[currentIndex], //appBar: AppBar(title: const Text('Bottom App Bar')), //悬浮按钮的位置...child: const Icon(Icons.add), onPressed: () { print("add press "); }, ), //其他菜单栏 bottomNavigationBar: BottomAppBar...( //悬浮按钮 与其他菜单栏的结合方式 shape: CircularNotchedRectangle(), // FloatingActionButton和BottomAppBar 之间的差距 notchMargin
老孟导读：昨天Flutter 1.17版本重磅发布，新的版本主要是优化性能、修复bug，有人觉得此版本毫无亮点，但也从另一方面体现了Flutter目前针对移动端已经较为完善，想了解具体内容，文末有链接，...NestedScrollView 可以在其内部嵌套其他滚动视图的组件，其滚动位置是固有链接的。...在普通的ScrollView中， 如果有一个Sliver组件容纳了一个TabBarView，它沿相反的方向滚动（例如，允许用户在标签所代表的页面之间水平滑动，而列表则垂直滚动），则该TabBarView...例如，浏览内部列表以滚动到顶部不会导致外部ScrollView中的SliverAppBar折叠以展开。...controller为滚动控制器，可以监听滚到的位置，设置滚动的位置等，用法如下： _scrollController = ScrollController(); //监听滚动位置 _scrollController.addListener
Bottom App Bar Material Design的一个重要特征是设计 BottomAppBar。可适应用户不断变化的需求和行为，So，BottomAppBar是一个从标准物质指导的演变。...Bottom Navigation BottomNavigationView创建底部导航栏，用户只需轻点一下即可轻松浏览和切换顶级内容视图。 ...持久性底部页面是从屏幕底部出现的视图，在主要内容上升高。他们可以垂直拖动以暴露他们的内容列表。 注意：如果要使用模态（对话框）的底页，请使用 BottomSheetDialogFragment。...此状态通常是底部工作表的“静止位置”。...如果已经在Activity使用CoordinatorLayout，添加底部表单很简单： 将任何视图添加为CoordinatorLayout的直接子视图。
如下图：状态栏是指android手机顶部显示手机状态信息的位置。 android 自4.4开始新加入透明状态栏功能，状态栏可以自定义颜色背景，使titleBar能够和状态栏融为一体，增加沉浸感。...io.flutter.embedding.android.FlutterActivity import io.flutter.embedding.engine.FlutterEngine import...Kotlin详情见：https://www.kotlincn.net/ flutter create flutter_app 命令创建flutter项目时，默认是Kotlin语言模式，如果想要修改成Java...如上图：BottomAppBar组件凸起凹陷导航栏配置 int _selectedIndex = 0; // 创建数组引入页面 List pglist = [HomePage(), FindPage()...: pglist[_selectedIndex], // 抽屉菜单 // drawer: new Drawer(), // 底部凸起凹陷导航栏 bottomNavigationBar: BottomAppBar
领取专属 10元无门槛券
手把手带您无忧上云
