flutter - Listview如何能够像往常一样在tabBar之外滚动？ - 腾讯云开发者社区

在Flutter中，我们也有对应的列表Widget，就是ListView。注意：在Flutter里面想要实现滑动效果，都需要在组件外部包裹滚动的视图。...在Flutter中我们可以使用GridView来实现，使用方式和ListView也比较相似。...Flutter官方文档中提到，ListView的默认构造器建议在需要展示的元素个数较少时使用，在展示的元素数量较多时，建议使用ListView.builder() 方法构造视图。...比如视图滚动到底部时，我们可能希望做上拉加载更多；比如滚动到一定位置时显示一个回到顶部的按钮，点击回到顶部的按钮，回到顶部；比如监听滚动什么时候开始，什么时候结束；在Flutter中监听滚动相关的内容由两部分组成...DefaultTabController是一个Widget组件，后面示例中可以看到如何对其进行使用。 5.2 TabBar介绍源码分析： const TabBar({ Key?

7.2K3 0

Flutter实现顶部导航栏功能

import 'package:flutter/material.dart'; class AppBarDemoPage extends StatelessWidget { const AppBarDemoPage...( // isScrollable: true, //可滚动 indicatorColor: Colors.blueGrey, //指示器的颜色...导航栏的实现 import 'package:flutter/material.dart'; class CategoryPage extends StatefulWidget { CategoryPage...) ], ), ], ), ), ); } } 这么写是对导航栏点击做的监听，实现效果一样...import 'package:flutter/material.dart'; class NavBarPage extends StatefulWidget { NavBarPage({Key

2.1K3 0

您找到你想要的搜索结果了吗？

是的

没有找到

Flutter自定义 TabBar

TabBar常用于放在AppBar中，以标签页的形式展示同一个页面不同内容的主题标签。...常见的属性如下： 1. tabs 标签组； 2. controller 标签控制器； 3. isScrollable 标签组是否可以滚动； 4. indicatorColor 指示器的颜色； 5. indicatorWeight...实现一个普通的Tab选项卡代码示例： import 'package:flutter/material.dart'; class HomePage extends StatelessWidget {...( // 多个标签时滚动加载 isScrollable:true...推荐页面')), ], ), ); } } 效果图如下：上面这个自定义的Tab选项卡看起来很简单，但是由于加入了控制器，在实际项目中可以运用控制器实现一些复杂的页面交互

1.7K4 0

Flutter 自定义 TabBar

TabBar常用于放在AppBar中，以标签页的形式展示同一个页面不同内容的主题标签。常见的属性如下： 1. tabs 标签组。值的类型为Widget列表； 2. controller 标签控制器。...值的类型为TabController； 3. isScrollable 标签组是否可以滚动。值的类型为bool； 4. indicatorColor 指示器的颜色。...实现一个普通的Tab选项卡代码示例： import 'package:flutter/material.dart'; class HomePage extends StatelessWidget {...( // 多个标签时滚动加载 isScrollable:true...上面这个自定义的Tab选项卡看起来很简单，但是由于加入了控制器，在实际项目中可以运用控制器实现一些复杂的页面交互。

3.2K2 0

Flutter+Dart聊天实例|flutter仿微信聊天|红包|朋友圈

'; // 引入底部Tabbar页面导航 import 'components/tabbar.dart'; // 引入地址路由 import 'router/routes.dart'; void...顶部沉浸式状态条+底部tabbar 至于在flutter中如何实现顶部透明状态栏(去掉状态栏黑色半透明背景)，去掉右上角banner，详细介绍可以去看这篇文章 https://segmentfault.com...iconfont如何实现，这时就需要用到IconData来实现自定义图标了。...中圆点数字/红点提醒如下图红点提示在flutter没有提供这种组件，只能自定义实现。...聊天消息滚动到最底部，使用的是ListView里controller控制器jumpTo方法实现 ScrollController _msgController = new ScrollController

6.8K3 1

Flutter 视图布局（二）

而且这是一个很少能够直接使用的 Widget，如果需要的话应该优先选择 ListView，因为它有相同的布局方式以及提供了滚动行为。...简单来说（翻译一下），通常在可滚动列表的容器中子项都会被装在重绘边界之内，以便列表在滚动时不需要将它们进行重绘。...cacheExtent 在视图可见区域之外有一个区域（即垂直是上下部分，水平是左右部分），用于缓存滚动即进入可见区域的子类。...ClampingScrollPhysics 我也不知道为什么要用 Clamping，可能是像钳子一样拥有最大张合度吧。在默认情况下，如果列表子元素不足以超出可视范围则不会产生可滚动行为。...Ok，那我们就来看看代码是如何实现的。当 itemCount 设置为 null 时就可以实现无限下拉列表。少侠小伙伴们可以在代码中尝试修改一下看看效果。

3K1 0

Flutter 首页必用组件NestedScrollView

老孟导读：昨天Flutter 1.17版本重磅发布，新的版本主要是优化性能、修复bug，有人觉得此版本毫无亮点，但也从另一方面体现了Flutter目前针对移动端已经较为完善，想了解具体内容，文末有链接，...在普通的ScrollView中，如果有一个Sliver组件容纳了一个TabBarView，它沿相反的方向滚动（例如，允许用户在标签所代表的页面之间水平滑动，而列表则垂直滚动），则该TabBarView...bool innerBoxIsScrolled) { return [SliverAppBar( title: Text('老孟'), )]; }, body: ListView.builder.../20180918/2018091815372344164.jpg', fit: BoxFit.fitHeight, ), ), )]; }, body: ListView.builder...style: TextStyle(color: Colors.white, fontSize: 20), ), ); },itemCount: 20,), ) 效果如下：与TabBar

4.3K1 0

UITableView在Flutter中是什么？

这样的需求，在iOS中是用UITableView实现的；而在Flutter中，实现这种需求的则是列表控件ListView。...这时，各自视图的滚动和布局模型就是相互独立、分离的，就很难保证整个页面统一一致的滑动效果。那么，Flutter是如何解决多ListView嵌套时，页面滑动效果不一致的问题的呢？...在Flutter中，因为Widget并不是渲染到屏幕的最终视觉元素（RenderObject才是），所以我们无法像原生的iOS或Android一样，向持有的Widget对象获取或设置最终渲染相关的视觉信息...介绍完了如何通过ScrollController来监听ListView滚动信息，以及怎样进行滚动控制之后，接下来我们再来看看如何获取ScrollNotification通知，从而感知ListView的各类滚动事件...总结在处理展示一组连续、可滚动的视图元素的场景中，Flutter提供了比原生Android、iOS系统更为强大的列表组件ListView与CustomScrollView。

5.6K1 0

13.Flutter学习之路AppBar实现顶部tab

AppBar 属性描述 leading 在标题前面显示一个控件，在首页通常显示引用logo，在其他界面则是返回键 title 标题，通常显示当前页面的标题文字，可以放组件 actions 通常使用IconButton...来表示，可以放按钮组 bottom 通常会放TabBar，在标题下面显示一个Tab导航栏 backgroundColor 导航背景颜色 iconTheme 图标样式 textTheme 文字样式 centerTitle...是否可以滚动 indicatorColor 指示器颜色 indicatorWeight 指示器高度 indicatorPadding 底部指示器的Padding indicator 指示器decoration...Style DefaultTabController 属性描述 initialIndex 默认显示第几个 length 总共显示几个tab页面 child 组件 Demo 接下来我们来看一下我们的如何使用...) ], ) ), ); } } 这里提一个小知识点debugShowCheckedModeBanner可以取消flutter

1.4K1 0

Flutter中的抽屉组件Drawer

值的类型为Widget；代码示例： import "package:flutter/material.dart"; class CategoryPage extends StatefulWidget...值的类型为Widget；代码示例： import "package:flutter/material.dart"; class CategoryPage extends StatefulWidget...// 弹性容器布局 Expanded( child:TabBar...( // 多个标签时滚动加载 isScrollable:true...), ], ) ) ); } } 在抽屉中进行路由跳转后返回页面时

2.1K3 0

【Flutter】侧拉导航栏实现 ( Drawer 组件 | PageView 组件 )

---- Scaffold 组件中的 drawer 参数 , 就是设置侧拉导航栏菜单的 , 为其赋值一个 Drawer 组件 ; Drawer 组件就是侧拉菜单 , 该组件的 child 设置一个 ListView...组件 , 在列表中设置 DrawerHeader , ListTile 等子组件 ; class Drawer extends StatelessWidget { const Drawer({...key, this.scrollDirection = Axis.horizontal, // 设置滚动方向垂直 / 水平 this.reverse = false, // 反向滚动...controller, // 滚动控制类 this.physics, // 滚动逻辑 , 不滚动 / 滚动 / 滚动到边缘是否反弹 this.pageSnapping = true,...设置', icon: Icons.settings), const TabData(index: 9, title: '学位', icon: Icons.school), ]; /// 通过 TabBar

1.9K2 0

Flutter跨平台移动端开发丨顶部导航栏 TabBar Widget

支持左右滑动切换、不限 item 数量的 tabbar 是分类信息列表展示必不可少的组件，在 flutter 中可通过 AppBar + TabBar + PageView + ListView 完成这个需求.../main/tab/MainTab.dart'; import 'package:flutter/material.dart'; /** * @des 顶部 tab 部件 * @author liyongli...部件 item 对应的页面也就是 ListView 部分，修改 initPageWidget 返回的 widget 为你需要的样式即可 import 'package:flutter/material.dart...部件如何应用 import 'package:delongzhixuan/utils/tab/TabWidget.dart'; import 'package:delongzhixuan/utils/...tab/TabItemWidget.dart'; import 'package:flutter/material.dart'; /** * @des 产品首页 * @author liyongli

1.9K3 0

Flutter完整开发实战详解(二、快速开发实战篇)

作为系列文章的第二篇，继《Flutter完整开发实战详解(一、Dart语言和Flutter基础)》之后，本篇将为你着重展示：如何搭建一个通用的Flutter App 常用功能脚手架，快速开发一个完整的...1、Tabbar控件实现 Tabbar 页面是常有需求，而在Flutter中： Scaffold + AppBar + Tabbar + TabbarView 是 Tabbar 页面的最简单实现，但在加上...Flutter 中为我们提供了 RefreshIndicator 作为内置下拉刷新控件；同时我们通过给 ListView 添加 ScrollController 做滑动监听，在最后增加一个 Item，...( ///保持ListView任何情况都能滚动，解决在RefreshIndicator的兼容问题。...继续上一小节中的 _buildProgressIndicator方法实现，通过 flutter_spinkit 可以快速实现更不一样的 Loading 样式。

5K3 0

Flutter 构建完整应用手册-设计基础知识顶

这本食谱包含演示如何在写Flutter应用程序时解决常见问题的食谱。每个配方都是独立的，可以作为参考帮助您构建应用程序。...在这个例子中，我们将创建一个带有3个Tab小部件的TabBar，并将其放置在AppBar中。...如果你手动创建一个TabController，你需要将它传递给TabBar。 3.为每个选项卡创建内容现在我们有了选项卡，我们希望在选择标签时显示内容。为此，我们将使用TabBarView部件。...在Flutter中，我们可以将Drawer小工具与Scaffold结合使用，以创建带有材质设计Drawer的布局！...在这个例子中，我们将使用一个ListView。尽管我们可以使用Column部件，但ListView在这种情况下很方便，因为如果内容占用的空间比屏幕支持的更多，它将允许用户滚动抽屉。

7.1K1 0

Flutter 1.22 正式发布

如果您想使用平台视图在iOS或Android上托管自己的本机UI组件，则可以了解如何在使用平台视图在Flutter应用中托管本机Android和iOS视图上。...有关详细信息，我强烈推荐有关Flutter中的声明式导航和路由的文章。另外，您对Navigator 1.0的现有使用将像今天一样继续使用，并且不会在短期内被删除。如果您喜欢该模型，则可以继续使用它。...我们已经在Scrollable类中提供了支持，例如ListView和SingleChildScrollView（记住用户的滚动位置）和TextField（恢复他们输入的文本），并且我们计划将其扩展到其他小部件...新的统一的Dart开发人员工具与往常一样，对Flutter的更新不仅意味着引擎和框架，还包括工具。...EasyA联合创始人Phil Kwok 重大变化与往常一样，我们试图将重大更改的数量保持在最少。以下是Flutter 1.22版本中的列表。

7.5K2 0

Flutter完整开发实战详解(二、快速开发实战篇)

5.2K1 0

SliverAppBar

，不知道长什么样子的童鞋问下周围的小伙伴如何？...来构建了一个可以滚动的区域最后我们给NestedScrollView的body加了一个ListView 然后我们来看下效果： ?...当然我们是希望这个TabBar在SliverAppBar下方，并且随着SliverAppBar滚动的，但是我们还是来看下效果吧 ?...但是有童鞋就问问了，我们怎么让这个SliverPersistentHeader中的内容（TabBar）不随着ListView的滚动而滑动呢？...其实很简单，因为SliverPersistentHeader跟SliverAppBar一样都有一个 pinned属性，将它设置为true这里面的内容就会在到达顶部后停止跟随ListView移动了。

1.8K3 0

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

第1步：创建起始Flutter应用程序第2步：使用外部包装第3步：添加一个有状态的小部件第4步：创建一个无限滚动ListView 第5步：添加交互性第6步：导航到新的屏幕第7步：使用主题更改UI...它可以在MyApp之外的文件中的任何位置使用，但解决方案将它放在文件的底部。...应用程序应该像以前一样运行，每次热重新加载或保存应用程序时都会显示一个字对。 ? 问题？如果您的应用程序运行不正常，则可以使用以下链接中的代码重新进入正轨。...当用户滚动时，ListView小部件中显示的列表将无限增长。 ListView的builder工厂构造函数允许您根据需要懒惰地构建列表视图。...用ListView和ListTiles创建一个延迟加载的无限滚动列表。创建了一条路由并添加了在主路由和新路由之间移动的逻辑。了解如何使用主题更改应用UI的外观。

9.5K2 0

Flutter技术与实战(4)

这时，各自视图的滚动和布局模型就是相互独立、分离的，就很难保证整个页面统一一致的滑动效果。 Flutter 是如何解决多 ListView 嵌套时，页面滑动效果不一致的问题的呢？...如何快速回到列表顶部？列表滚动是否已经开始，或者是否已经停下来了？...问题在ListView中，如何提前缓存子元素？...不过 Flutter 无法像浏览器冒泡那样取消或者停止事件进一步分发，我们只能通过 hitTestBehavior 去调整组件在命中测试期内应该如何表现，比如把触摸事件交给子组件，或者交给其视图层级之下的组件去响应...在之前的ListView学习中，介绍了 ScrollNotification 的使用方法：ListView 在滚动时会分发通知，我们可以在上层使用 NotificationListener 监听 ScrollNotification

10.9K2 0

Flutter入门指北（Part 8）之Sliver 组件及NestedScrollView

因为涉及部件比较多，所以留到这边来继续讲，不然写太多了怕小伙伴看不下去在上节最后，给小伙伴们展示了 SliveGrid 和 SliverFixedExtentList 的用法，基本上和 GridView 和 ListView...也不会少，毕竟 Flutter 主打的也是 MaterialDesign 啊。...SliverPadding 那么在 CustomScrollView 中部件之间如何设置间距呢，可能你会想到用 SliverToBoxAdapter 包裹一个 Padding 来处理，当然没问题。...SliverPersistentHeader Flutter 中，为我们提供了这么一个作为头部的部件 SliverPersistentHeader，这个部件可以根据滚动的距离缩小高度，有点类似 SliverAppBar...糟透了的翻译 X 1：一个内部能够嵌套其他滚动部件，并使其滚动位置联结到一起的滚动部件 /// The most common use case for this widget is a scrollable

2.2K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

Flutter可滑动组件

Flutter实现顶部导航栏功能

Flutter自定义 TabBar

Flutter 自定义 TabBar

Flutter+Dart聊天实例|flutter仿微信聊天|红包|朋友圈

Flutter 视图布局（二）

Flutter 首页必用组件NestedScrollView

UITableView在Flutter中是什么？

13.Flutter学习之路AppBar实现顶部tab

Flutter中的抽屉组件Drawer

【Flutter】侧拉导航栏实现 ( Drawer 组件 | PageView 组件 )

Flutter跨平台移动端开发丨顶部导航栏 TabBar Widget

Flutter完整开发实战详解(二、快速开发实战篇)

Flutter 构建完整应用手册-设计基础知识顶

Flutter 1.22 正式发布

Flutter完整开发实战详解(二、快速开发实战篇)

SliverAppBar

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

Flutter技术与实战(4)

Flutter入门指北（Part 8）之Sliver 组件及NestedScrollView

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐