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

Flutter: bottomAppBar列表视图滚动位置

Flutter是一种跨平台的移动应用开发框架,可以用于快速构建高质量的原生用户界面。它使用Dart编程语言,由Google开发和维护。Flutter具有许多优势,例如快速开发周期、热重载、响应式框架、强大的UI库等。

针对你提到的问题,关于Flutter中的bottomAppBar列表视图滚动位置,可以使用以下方法来解决:

  1. 通过ListView或CustomScrollView组件实现滚动列表视图。这两个组件都支持垂直方向的滚动,并且可以添加多个子组件作为列表项。
  2. 如果需要在bottomAppBar中显示滚动位置,可以使用ScrollController来监听滚动位置的变化。通过添加一个ScrollController对象,并将其与ListView或CustomScrollView组件的controller属性关联,可以实现监听滚动位置。
  3. 通过ScrollController的属性可以获取滚动位置的信息,例如offset属性可以获取当前滚动位置的像素值。

下面是一个示例代码,演示如何在Flutter中实现bottomAppBar列表视图滚动位置的监听:

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

class MyPage extends StatefulWidget {
  @override
  _MyPageState createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  ScrollController _scrollController = ScrollController();
  double _scrollPosition = 0;

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(_scrollListener);
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  void _scrollListener() {
    setState(() {
      _scrollPosition = _scrollController.offset;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My App'),
      ),
      bottomNavigationBar: BottomAppBar(
        child: Container(
          height: 50.0,
          child: Center(
            child: Text('Scroll position: $_scrollPosition'),
          ),
        ),
      ),
      body: ListView.builder(
        controller: _scrollController,
        itemBuilder: (context, index) => ListTile(
          title: Text('Item $index'),
        ),
        itemCount: 100,
      ),
    );
  }
}

在上述示例中,我们创建了一个有底部应用栏的页面,并在应用栏中显示了当前的滚动位置。通过ScrollController来监听滚动位置的变化,并将滚动位置保存在_scrollPosition变量中。每当滚动位置发生变化时,会重新构建页面以更新底部应用栏中的滚动位置文本。

对于这个问题,腾讯云提供了Flutter的移动应用云开发服务(云开发 Flutter 插件),可以帮助开发者快速搭建云端服务和前端页面,无需自行搭建服务器和数据库。具体信息可以参考腾讯云云开发 Flutter 插件的介绍页面:腾讯云云开发 Flutter 插件

这是关于Flutter中的bottomAppBar列表视图滚动位置的回答,希望能够帮助到你!

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

相关·内容

android使用flutter的ListView实现滚动列表的示例代码

现如今打开一个 App,比如头条、微博,都会有长列表,随着我们不断地滑动,视窗内的内容也会不断地更新。今天就用 Flutter 实现一下这种效果。 ?...如果在 web 开发时,是需要容器加上样式 overflow: auto; 要想用 Flutter 实现,其实也是很简单的,因为 Flutter 为我们提供了 ListView 组件。...前者规定列表数目的多少,后者决定了每个列表如何渲染。...总结,上面主要讨论了 ListView 的几个构造函数及用法,讨论如何实现常见的滚动列表。 完成的代码,可见list_view.dart 。...最后 笔者最近在学习flutter,会持续地记录自己的学习过程,并放在 github 上。 以上就是本文的全部内容,希望对大家的学习有所帮助。

1.8K40

排行榜--实现点击视图自动滚动到当前用户所在位置.

我们今天来实现一下,点击当前用户的div, 自动滚动到用户在排行榜中的位置. 效果 大家可以先看一下下面的GIF, 所实现的效果. 实现 1....准备DOM 结构 首先,我们在进行列表建设的时候, 需要准备好一个数据. 因为此处我们是使用的vue3来进行编写. 对于列表我们使用的是v-for列表渲染来做的....DOM const currentItem = rankingList.value.querySelector(`[data-key="${id}"]`); 第三步: 使用scrollIntoView方法滚动视图到当前选中的元素...但是我们发现,还可以继续改进, 目前我们虽然滚动到了屏幕的中间, 但是我们很难去发现. 所以我们可以继续完善一下这个方法. 就是滚动视图的中间的同时高亮选中的DOM. 3....使用Element.scrollIntoView(), 将当前的选中的DOM自动滚动视图的中间. 高亮显示当前的元素之后(2s)进行取消高亮.

10210

GridView滚动列表的顶级用法【flutter20个实例之二】

二、讲解(后附源码) 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(), )); } //列表

1.9K20

Flutter》-- 6.高级组件

参阅书籍: 《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:是否滚动到了可滚动组件的边界。

10.6K20

UITableView在Flutter中是什么?

滚动发生变化而列表项又很多时,这样的计算就会非常频繁。 如果提前设置好itemExtent,ListView则可以计算好每一个列表项元素的相对位置,以及自身的视图高度,省去了无谓的计算。...ListView的组件控制器是ScrollController,我们可以通过它来获取视图滚动信息,更新视图滚动位置。...如下代码所示,我们声明了一个有着100个元素的列表项,当滚动视图到特定位置后,用户可以点击按钮返回到列表顶部: 首先,我们在State的初始化方法里,创建了ScrollController,并通过_controller.addListener...方法注册了滚动监听方法回调,根据当前视图滚动位置,判断当前是否需要展示“Top”按钮。...总结 在处理展示一组连续、可滚动视图元素的场景中,Flutter提供了比原生Android、iOS系统更为强大的列表组件ListView与CustomScrollView。

5.5K10

Flutter 首页必用组件NestedScrollView的示例详解

可以在其内部嵌套其他滚动视图滚动视图,其滚动位置是固有链接的。...在普通的ScrollView中, 如果有一个Sliver组件容纳了一个TabBarView,它沿相反的方向滚动(例如,允许用户在标签所代表的页面之间水平滑动,而列表则垂直滚动),则该TabBarView...例如,浏览内部列表滚动到顶部不会导致外部ScrollView中的SliverAppBar折叠以展开。...滚动隐藏AppBar 比如实现如下场景,当列表滚动时,隐藏AppBar,用法如下: NestedScrollView( headerSliverBuilder: (BuildContext context...controller为滚动控制器,可以监听滚到的位置,设置滚动位置等,用法如下: _scrollController = ScrollController(); //监听滚动位置 _scrollController.addListener

3.7K40

Flutter可滑动组件

Flutter中,我们也有对应的列表Widget,就是ListView。 注意:在Flutter里面想要实现滑动效果,都需要在组件外部包裹滚动视图。...当列表滚动到具体的index位置时,会调用该构建器构建列表项。 itemCount:列表项的数量,如果为null,则为无限列表。...Flutter中有一个可以完成这样滚动效果的Widget:CustomScrollView,其成员变量slivers可以接收一组Sliver,从而达到统一管理多个滚动视图的目的。...比如视图滚动到底部时,我们可能希望做上拉加载更多;比如滚动到一定位置时显示一个回到顶部的按钮,点击回到顶部的按钮,回到顶部;比如监听滚动什么时候开始,什么时候结束; 在Flutter中监听滚动相关的内容由两部分组成...ListView、GridView的组件控制器是ScrollController,我们可以通过它来获取视图滚动信息,并且可以调用里面的方法来更新视图滚动位置

7.1K30

Flutter 视图布局(二)

在 Flutter 视图布局(一)中文章结束时留下了一个问题,大家有尝试去实现吗? 如果大家认真看文章的话,我觉得这并不是很难的东西。...简单来说(翻译一下),通常在可滚动列表的容器中子项都会被装在重绘边界之内,以便列表滚动时不需要将它们进行重绘。...BouncingScrollPhysics 的话就是大家都熟悉的回弹效果了,当操作列表到达可视范围尽头时还可以继续超出一定的空间,当失去焦点后回到尽头的位置,这样就能给予用户一个良好的使用体验。...://api.flutter.dev/flutter/widgets/ScrollView/controller.html 相关文章 Flutter State x Widget Flutter 视图布局...-前言 Flutter 视图布局(一) 感谢大家的喜欢!

3K10

Flutter 视图布局-前言

那么接下来就来看一看 Flutter视图布局吧。...01 - 视图的布局方式 简单说一下我对 Flutter 视图布局的看法,在前篇中我有提到 Flutter 是使用了 Dart 语言进行编写,所以弱化了视图编辑的部分,视图的渲染、结构、布局都通过代码逻辑来生成...多子类元素布局 多子类元素布局的 Widget 有10种: Row 在水平方向上排列子元素的列表。 Column 在垂直方向上排列子元素的列表。...ListView 可滚动列表控件。ListView 是最常用的滚动 Widget,它在滚动方向上一个接一个地显示它的子元素。在纵轴上,子元素们被要求填充ListView。...每一种 Widget 都会影响其子元素最终的视图显示效果,如大小、位置、边框、背景等。

2.2K110

Flutter跨平台移动端开发丨SingleChildScrollView、ListView......

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'; /*

8.7K51

Flutter

值得注意的是,页面切换时,由于 State 对象在视图树中的位置发生了变化,需要先暂时移除后再重新添加,重新触发组件构建,因此这个函数也会被调用。...在滚动发生变化而列表项又很多时,这样的计算就会非常频繁。...但如果提前设置好 itemExtent,ListView 则可以提前计算好每一个列表项元素的相对位置,以及自身的视图高度,省去了无谓的计算。...以一个有着封面头图的列表为例,我们希望封面头图和列表这两层视图滚动联动起来,当用户滚动列表时,头图会根据用户的滚动手势,进行缩小和展开。...通过 NotificationListener 则: 可以监听其子 Widget 中的任意 ListView; 不仅可以得到这些 ListView 的当前滚动位置信息,还可以获取当前的滚动事件信息 。

1.9K40

Flutter技术与实战(4)

这个构造函数有两个关键参数: itemBuilder,是列表项的创建方法。当列表滚动到相应位置时,ListView 会调用该方法创建对应的子 Widget。...但对于定高的列表项元素,建议提前设置好这个参数的值。 但如果提前设置好 itemExtent,ListView 则可以提前计算好每一个列表项元素的相对位置,以及自身的视图高度,省去了无谓的计算。...如何快速回到列表顶部?列表滚动是否已经开始,或者是否已经停下来了?...ListView 的组件控制器则是 ScrollControler,我们可以通过它来获取视图滚动信息,更新视图滚动位置。.../** * 声明了一个有着 100 个元素的列表项,当滚动视图到特定位置后,用户可以点击按钮返回列表顶部: */ class MyAPPState extends State {

10.8K20

Flutter 3.7更新详解

增强对 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 视图未显示时的内存占用。

3.2K00

flutter BottomAppBar实现不规则底部导航栏

本文实例为大家分享了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

1.7K20

Flutter 首页必用组件NestedScrollView

老孟导读:昨天Flutter 1.17版本重磅发布,新的版本主要是优化性能、修复bug,有人觉得此版本毫无亮点,但也从另一方面体现了Flutter目前针对移动端已经较为完善,想了解具体内容,文末有链接,...NestedScrollView 可以在其内部嵌套其他滚动视图的组件,其滚动位置是固有链接的。...在普通的ScrollView中, 如果有一个Sliver组件容纳了一个TabBarView,它沿相反的方向滚动(例如,允许用户在标签所代表的页面之间水平滑动,而列表则垂直滚动),则该TabBarView...例如,浏览内部列表滚动到顶部不会导致外部ScrollView中的SliverAppBar折叠以展开。...controller为滚动控制器,可以监听滚到的位置,设置滚动位置等,用法如下: _scrollController = ScrollController(); //监听滚动位置 _scrollController.addListener

4.1K10

听说谷歌Baba更新了 Material UI ...

Bottom App Bar Material Design的一个重要特征是设计 BottomAppBar。可适应用户不断变化的需求和行为,So,BottomAppBar是一个从标准物质指导的演变。...Bottom Navigation BottomNavigationView创建底部导航栏,用户只需轻点一下即可轻松浏览和切换顶级内容视图。 ...持久性底部页面是从屏幕底部出现的视图,在主要内容上升高。他们可以垂直拖动以暴露他们的内容列表。 注意:如果要使用模态(对话框)的底页,请使用 BottomSheetDialogFragment。...此状态通常是底部工作表的“静止位置”。...如果已经在Activity使用CoordinatorLayout,添加底部表单很简单: 将任何视图添加为CoordinatorLayout的直接子视图

3K20
领券