flutter listview 滚动到底部_从头到尾撸一遍Flutter的一切...

最新推荐文章于 2022-10-17 17:32:38 发布
最新推荐文章于 2022-10-17 17:32:38 发布
阅读量880 收藏
点赞数
文章标签： flutter listview 滚动到底部 flutter row 滚动 flutter textspan flutter 分割线 flutter 进度条 flutter下拉筛选组件

v2-d98ae2263eef96249b1019b96a941019_b.jpg

Flutter学(cai)习(keng)之路(Exploring Flutter in action)

创世宣言

  • 尽情踩坑吧 ⤵️

主要Cover到的点

  • [x] 路由界面
  • [x] 状态传递
  • [x] 子Widget树获取父级StatefulWidget的State对象
  • [x] 基础控件
  • [x] 随机字符串
  • [x] 文本控件，字体样式(Text/TextStyle/Text.rich/TextSpan)
  • [x] 按钮系列(RaisedButton/FlatButton/OutlineButton/IconButton/FlatButton.icon/shape)
  • [x] 图片系列(ImageProvider/Image/Image.asset/Image.network)
  • [x] 单选开关和复选框Switch/Checkbox
  • [x] 输入框和表单(TextField/Form/TextFormField/FormState)
  • [x] 登录表单(TextField/Form/TextFormField/FormState)
  • [x] 各种样式的进度条(LinearProgressIndicator/CircularProgressIndicator)
  • [x] 布局控件
  • [x] 线性布局(Row/Column)
  • [x] 弹性布局(Flex/Expanded/Spacer)
  • [x] 流式布局(Wrap/Flow)
  • [x] 层叠布局(Stack/Positioned)
  • [x] 对齐与相对定位(Align/Alignment/FractionalOffset/Center)
  • [x] 容器控件
  • [x] 填充(Padding/EdgeInsets)
  • [x] 尺寸限制(ConstrainedBox/BoxConstraints/SizedBox/UnconstrainedBox)
  • [x] 装饰(DecoratedBox)
  • [x] 变换(Transform/Matrix4(作用于绘制阶段)/RotatedBox(作用于布局阶段))
  • [x] 容器(Container(多种装饰和填充等组件的组合)/Padding/Margin)
  • [x] 裁减(Clip/CustomClipper(裁减动作的作用时期与Transform相同，都作用于绘制阶段))
  • [x] 通用类导航主界面(Scaffold/AppBar/TabBar/TabBarView/Drawer/FloatingActionButton)
  • [x] 列表控件
  • [x] 单child滚动控件(SingleChildScrollView/Scrollbar)
  • [x] 有限列表项情况下使用ListView(ListView)
  • [x] 众多列表项情况下使用ListView(ListView.builder)
  • [x] 带分割线的列表项情况下使用ListView(ListView.separated)
  • [x] 下拉刷新 和 上拉加载更多(初始化加载数据、结束时的标记、根据index判断底部是绘制结束的Widget还是正在加载时的Widget、Widget的正常显示)
  • [x] 有限GridView(GridView + SliverGridDelegateWithFixedCrossAxisCount)
  • [x] 有限GridView.count(效果完全等价于GridView + SliverGridDelegateWithFixedCrossAxisCount)
  • [x] 有限GridView(GridView + SliverGridDelegateWithMaxCrossAxisExtent)
  • [x] 有限GridView.extent(效果完全等价于GridView + SliverGridDelegateWithMaxCrossAxisExtent)
  • [x] 无限GridView加载(GridView.builder)
  • [x] 滚动监听(ScrollController/ScrollPosition)
  • [x] 触摸反馈
  • [x] 事件处理
    • [x] 原始指针(触摸事件)(撸一个触摸板)(Listener)
  • [x] 事件冒泡
    • [x] 不同事件冒泡行为之比较(HitTestBehavior.deferToChild/HitTestBehavior.opaque/HitTestBehavior.translucent/IgnorePointer)
  • [x] 手势识别
    • [x] 点击/双击/长按/拖动/滑动(GestureDetector)
    • [x] 缩放(GestureDetector)
    • [x] GestureRecognizer(当所修饰的对象不为widget且具有recognizer节点时可用)
  • [x] 事件总线
  • [x] 简易EventBus(Dart实现)
  • [x] EventBus界面演示
  • [x] 通知
  • [x] 通知事件名称(NotificationListener.onNotification)
  • [x] 自定义通知(覆写Notification + NotificationListener)
  • [x] 通知冒泡(onNotification回调中的return value)
  • [x] 存储路径访问和文件操作
  • [x] 存储路径访问(访问缓存/访问包路径/访问SD卡)(PathProvider)
  • [x] 网络编程
  • [x] HttpClient
  • [x] Dio(本质是基于HttpClient封装的上层API)
    • 更多Dio版本信息及API(官方地址)
  • [x] 功能控件及数据状态管理(InheritedWidget)
  • [x] 导航返回键和实体返回键拦截(再按一次确认退出)(WillPopScope)
  • [x] 控件跨级传递数据(InheritedWidget/dependOnInheritedWidgetOfExactType/getElementForInheritedWidgetOfExactType/updateShouldNotify/didChangeDependencies)
  • [x] 跨控件状态管理(手动实现Provider)
    • 第三方Provider实现
  • [x] 异步更新UI(FutureBuilder/StreamBuilder)
  • [x] 应用主题切换(Theme/ThemeData(内部通过InheritedWidget实现))
  • [x] 单个界面主题切换
  • [x] 全局界面主题切换
  • [x] 与原生互调和相互集成(MethodChannel.invokeMethod)
  • [x] Flutter调用Android Native方法
  • [x] Flutter界面跳转至Android Native界面
  • [x] WebView Flutter(webview_flutter)
  • [x] 开发者通用设置(MaterialApp)
  • [x] 是否显示界面布局网格(debugShowMaterialGrid)
  • [x] 是否打开性能监控，覆盖在屏幕最上面(showPerformanceOverlay)
  • [x] 是否打开栅格缓存图像的检查板(checkerboardRasterCacheImages)
  • [x] 是否打开显示到屏幕外位图的图层的检查面板(checkerboardOffscreenLayers)
  • [x] 是否打开覆盖图，显示框架报告的可访问性信息，显示边框(showSemanticsDebugger)
  • [x] 是否显示右上角的Debug标签(debugShowCheckedModeBanner)
  • [x] 切换操作系统平台(Android/iOS)
  • [x] 切换为Android应用: debugDefaultTargetPlatformOverride = TargetPlatform.android
  • [x] 切换为iOS应用: debugDefaultTargetPlatformOverride = TargetPlatform.iOS
  • [ ] 动画
  • [ ] 自定义控件
  • [ ] 国际化

正片(Action)

  • 内含大量gif图，loading可能会比较耗时，依自身网速而定

|

v2-61865916ae57e61e2dc1b07f456de3d5_b.gif

|

v2-f004d18354bfc40c8664676536827fb1_b.gif

|

v2-99f811ddd1521588f55d354ff051e39b_b.gif

|

v2-54e70ca64ba54b05cf111c4a66e0ba2e_b.gif

| | :---: | :---: | :---: | :---: | |

v2-a1971ef8dc8f0b163f9a32e464bc72a2_b.gif

|

v2-73ea924b60cc47e7c8b0dcda903a21a4_b.gif

|

v2-69e457d4e30c677de9540659363408b8_b.gif

|

v2-c45fd541795e6779c10077e7d60ff2e7_b.gif

| |

v2-221274b35bb3ec8eb12ab49616785088_b.gif

|

v2-6433565ad22afa0075c3442c43b3f983_b.gif

|

v2-0ef43f11f9b9b1eea372cc88e8663b4b_b.gif

|

v2-b12c3549b6c024596b3125cae0ceeea6_b.jpg

| |

v2-6b1c25c1c2c82ece34c4640689985ba4_b.gif

|

v2-94c8bc0e43c0f77bb652972a32b129bf_b.jpg

|

v2-34500e7bab42fa0cc27b8a89cd46f38e_b.jpg

|

v2-569ad078ec98f8f399124051356eecd7_b.jpg

| |

v2-95dad8e9af9c23e64575fa50ad205aba_b.jpg

|

v2-3c4a82fae742c05684799b3f5549256d_b.jpg

|

v2-60cec9f16d1867b35c9309c8853f4540_b.jpg

|

v2-4776450b8137c2160ea7fe75422353d9_b.jpg

| |

v2-0df1d6345eb7dedc812e134727701ced_b.jpg

|

v2-5826290493c8eb019f3aa3c1ae7cb66b_b.jpg

|

v2-d1dd449116dd91b227104bf190aeb0fc_b.jpg

|

v2-dbb9e8b27774eb54bbff3e631b1681ac_b.jpg

| |

v2-3cab2edcb9f02a1ea91322d254f4cea7_b.jpg

|

v2-a3b27d6416524bfa0af37c3ffc53b2ad_b.jpg

|

v2-1b854e633e8a6d4116095022bb729c07_b.jpg

|

v2-49c2bfa8b5d1a5fc83bbada352d00350_b.jpg

| |

v2-5ebd094c2d9b603d454439ee32ae18f5_b.jpg

|

v2-afb20d07b4b6945119ce914359084bcc_b.jpg

|

v2-205913461a8882f7453835dc29415b98_b.jpg

|

v2-bf54b68c59c72441f5a7aa303e777f39_b.jpg

|

整套效果的App下载链接

for Android

| OS平台应用包 | QRCode | | :---: | :---: | | Android APK包下载(内测密码:123456) |

v2-217ab4c390f30c10787a895c2136288e_b.jpg
Github项目地址​github.com
weixin_39562752
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
flutter 人脸检测_在 Flutter 中实现实时图像检测
weixin_39760721的博客
12-21 1900
最近 Flutter 的官方插件 camera 加入了获取图像流的功能，利用该功能我们可以获取到相机预览的实时画面。我用 camera 和 tflite 插件做了一个结合 TensorFlow Lite 的 Flutter 实时图像识别的 demo。以下是在 iPad 上的演示视频：使用 camera 插件的图像流功能：首先按照 camera 插件 的文档在项目中加入相机功能。然后调用 camer...
flutter图片识别_Flutter 资源和图片
weixin_39645041的博客
12-22 339
## 介绍Flutter应用程序可以包含代码和assets(有时称为资源)。asset是打包到程序安装包中的，可在运行时访问。常见类型的asset包括静态数据(例如JSON文件)，配置文件，图标和图片(JPEG，WebP，GIF，动画WebP / GIF，PNG，BMP和WBMP)。## 指定 assetsFlutter使用[pubspec.yaml](https://www.dartlang....
Flutter之ListView实现自动滑动到底部
adojayfan的博客
09-14 6085
文章目录使用场景思路ScrollPostion实现布局滑动到底部问题解决方案 使用场景 在常见社交App中，发送消息或者接收到他人消息后，消息列表都会自动滑动到底部，不需要我们手动滑动，这样的用户体验好。 思路 ListView使用ScrollController来控制滑动，其中有jumpTo、animateTo2个方法滑动到指定的位置。 /// packages/flutter/lib/src/widgets/scroll_controller.dart void jumpTo(double value
Flutter之ListView翻转，自动滑动到底部
前端菜鸟好先森的博客
10-17 3012
Flutter之ListView翻转，自动滑动到底部
flutter listview 滚动到底部_Flutter 首页必用组件NestedScrollView
weixin_39889214的博客
11-29 489
老孟导读：昨天Flutter 1.17版本重磅发布，新的版本主要是优化性能、修复bug，有人觉得此版本毫无亮点，但也从另一方面体现了Flutter目前针对移动端已经较为完善，想了解具体内容，文末有链接，如果你想升级到最新版本，建议慎重，有些人升级后项目无法运行。 今天介绍的组件是NestedScrollView，大部分的App首页都会用到这个组件。 可以在其内部嵌套其他滚动视图的滚动视图，其滚...
flutter_pull_to_refresh_new.zip
01-11
在Flutter开发中，实现下拉刷新和滚动到底部加载更多的功能是常见的需求，尤其是在构建列表或者网格视图时。`flutter_pull_to_refresh`库提供了一种简单易用的方式来实现这一功能。下面将详细介绍如何利用这个库来...
flutter_ui_challenge_flight_search.zip
08-10
【标题】"flutter_ui_challenge_flight_search.zip"是一个包含 Flutter 高级用户界面设计挑战的压缩文件，主要关注在Flutter框架下实现飞行搜索功能的UI。这个项目可能是为开发者提供一个练习或者示例，以展示如何在...
io.flutter.zip
07-23
Android Studio上运行Flutter，报错could not find io.flutter:flutter_embedding_debug的错误，需要替换以上zip文件即可，Android Studio 4.2.0, Flutter 2.2.3, Dart 2.13.4
github_java_flutter_github安卓开发_GitHubAppKey_github.comn_
09-30
标题中的“github_java_flutter_github安卓开发_GitHubAppKey_github.comn_”揭示了项目的核心内容，即使用Java（可能用于部分原生模块）和Flutter进行GitHub应用的开发，同时提到了GitHubAppKey，这通常用于验证和...
flutter_bluetooth.zip_flutter 蓝牙 ios_flutter_bluetooth_flutter获取
07-14
flutter 蓝牙，通过蓝牙协议和单片机进行数据交互，控制智能硬件
flutter_qr_reader:QR码（扫描图片）识别（AndroidView UiKitView）
05-02
flutter_qr_reader 二维码（扫描码/图片）识别（AndroidView / UiKitView） 演示 入门 import 'package:flutter_qr_reader/flutter_qr_reader.dart' ; // 识别图片 final String data = await FlutterQrReader . imgScan ( File ); // 嵌入视图 QrReaderView ( width : 320 , height : 350 , callback : (container) {}, ) // 打开手电筒 ..setFlashlight // 开始扫码 ..startCamera // 结束扫码 ..stopCamera 对于IOS 通过使用键io.flutter.embedded_views_preview和值YES向
详解Flutter扫码识别二维码内容
01-20
前面一篇写了生成二维码图片，这篇来写使用相机扫描识别二维码 识别二维码需要用到插件barcode_scan 首先在pubspec.yaml文件中添加以下依赖，添加依赖后在pubspec.yaml运行flutter packages get或 使用IDE更新软件包。 dependencies: ... barcode_scan: ^1.0.0 Android配置 在使用它之前需要先配置 android\app\src\main\AndroidManifest.xml 在该文件中添加添加app获取相机权限及BarcodeScanner activity <!--获取相机权限--> <use
flutter_ocr
03-19
flutter_ocr 一个新的Flutter应用程序。 入门 该项目是Flutter应用程序的起点。 如果这是您的第一个Flutter项目，那么有一些资源可以帮助您入门： 要获得Flutter入门方面的帮助，请查看我们的，其中提供了教程，示例，有关移动开发的指南以及完整的API参考。 flutter_ocr
flutter listview 滚动到底部_Flutter常用Widget详解（三）
weixin_39741101的博客
11-28 350
前言前面两篇文章给大家介绍了Widget中对应原生开发中的一些常用基础控件，Text、TextField、Button、Dialog、Picker等，本篇我们将和大家一起学习ListView、GridView等列表网格布局控件和其他常用的用于布局的Widget，如Container、Row、Column、Padding等等。列表和网格视图WidgetListViewListView通常有两种用法：...
Flutter检测图像和实时相机流中对象
跨学科知识视角展现
05-13 1263
在本指南中，我们将使用tflite软件包和预先训练的SSD-MobileNet模型在Flutter中开发应用程序，该模型能够检测图像和实时相机流中的对象。 该应用程序能够离线检测对象。 我们还将能够从应用程序内拍照，并将其输入模型进行检测。 设置 如果尚未安装，请在计算机上设置Flutter。 Flutter网站上的本指南是一个很好的起点。设置Flutter之后，通过在终端中键入以下内容来创建一个新项目。 现在，您可以在自己喜欢的编辑器中打开项目。 安装包 我们使用image_picker从图库中选择图像，
flutter 人脸检测_flutter mlkit面部识别资源
weixin_39777018的博客
12-21 461
Flutter中的ML套件和面部检测MLKit和人脸检测….ML(机器学习)套件是 Google I / O 2018 的主要亮点之一。该套件由图像标签文字识别面部检测条形码扫描地标检测来自谷歌网站…对于使用MLKit进行文本识别，请参阅我的 文章 。对于使用MLKit的图像标签，请参阅我的 文章 。让我们开始…。首先，我们需要导入 mlkit包mlkit 0.5.0 – 使用Firebase M...
vue svg sprite loader_在Vue中使用icon、svg
weixin_39613744的博客
11-25 158
第一步安装 svg-sprite-loaderyarn 安装 yarn add svg-sprite-loader -Dnpm 安装npm install svg-sprite-loader -D第二步在你使用的Vue中找到一个 vue.config.js 文件，如果没有就创建。虽然官方文档说的是在webpack开头的文件中操作，但是我们在Vue中没有，所以我们就要将Vue-cli的内容翻译成s...
flutter滚动到底部_flutter ScrollController如何滚动到底部？
weixin_39647773的博客
12-19 2174
flutter ScrollController滚动到底部的示例代码如下：方式一：import'package:flutter/scheduler.dart';import'package:flutter/material.dart';voidmain(){runApp(newMyApp());}classMyAppextendsStatelessWidget{@override...
flutter listview 滚动到底部_(五) Flutter入门学习 之 Widget滚动
weixin_39997089的博客
11-22 493
列表是移动端经常使用的一种视图展示方式，在Flutter中提供了ListView和GridView。为了可能展示出更好的效果，我这里提供了一段Json数据，所以我们可以先学习一下Json解析。一. JSON读取和解析在开发中，我们经常会使用本地JSON或者从服务器请求数据后回去到JSON，拿到JSON后通常会将JSON转成Model对象来进行后续的操作，因为这样操作更加的方便，也更加的安全。所以学...
flutter ListView.builder设置可滚动
最新发布
05-11
Flutter 的 `ListView.builder` 默认是可滚动的，如果你需要设置 `ListView.builder` 的滚动行为，可以使用 `physics` 属性来设置。`physics` 属性接受一个 `ScrollPhysics` 对象，用于控制 `ListView.builder` 的滚动行为。常用的 `ScrollPhysics` 对象有以下几种： - `BouncingScrollPhysics`：iOS 风格的弹性滚动； - `ClampingScrollPhysics`：Android 风格的滑动到边缘后阻力滑动； - `NeverScrollableScrollPhysics`：禁止滚动； - `FixedExtentScrollPhysics`：固定项高度的滚动； - `PageScrollPhysics`：分页滚动。 例如，如果你想要 Android 风格的滑动到边缘后阻力滑动，可以这样设置： ```dart ListView.builder( physics: ClampingScrollPhysics(), // ... ) ``` 如果你想要禁止滚动，可以这样设置： ```dart ListView.builder( physics: NeverScrollableScrollPhysics(), // ... ) ``` 希望对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值