如何检测ListView Item的位置?

2024-02-18

如何根据列表视图项目在屏幕上的位置向其添加填充。例如,如果 listView 项位于屏幕中间,我希望将其内边距增加 10 点,如果 listView 项位于屏幕顶部附近,我希望将其内边距增加 15 点。


您可以通过附加一个来实现这一点ScrollController给你的ListView并创造性地使用它:

首先你需要定义一个ScrollController这将用于获得ScrollController.offset确定列表当前位置。然后我添加了一堆变量来调整这个动态列表,同时保持其预期功能:

  class DynamicPadding extends StatefulWidget {
    DynamicPadding({Key key,}) : super(key: key);

    @override
    _DynamicPaddingState createState() => _DynamicPaddingState();
  }


  class  _DynamicPaddingState extends State<DynamicPadding> {

   ScrollController _controller;

   var _middlePadding = 10.0 ; // padding of centered items

   var _edgesPadding = 15.0 ; // padding of non-centered items

   var _itemSize = 100.0 ; 

   int _centeredItems = 3 ;

   int _numberOfEdgesItems ; // number of items which aren't centered at any moment

   int _aboveItems ; // number of items above the centered ones

   int _belowItems ; // number of items below the centered ones


   @override
   void initState() {
     _controller = ScrollController(); // Initializing ScrollController
     _controller.addListener(_scrollListener); add a listener to ScrollController to update padding
     super.initState();
   }

   _scrollListener() {
     setState(() {});
   }

   @override
   Widget build(BuildContext context) {
     return new Scaffold(
         backgroundColor: Colors.grey.shade200,
         appBar: new AppBar(title: new Text('Dynamic Padding Example'),),
     body: ListView.builder(
     controller: _controller ,
     itemCount: 20,
     itemBuilder: (context, index) {

       // This is how to calculate number of non-centered Items
       _numberOfEdgesItems = ( (MediaQuery.of(context).size.height - _centeredItems*(_itemSize + 2*(_middlePadding))) ~/ (_itemSize + 2*(_edgesPadding)) ) ; 

       _aboveItems = ( ( (_controller.offset) / (_itemSize + 2*(_edgesPadding)) ) + _numberOfEdgesItems/2 ).toInt() ;

       _belowItems = _aboveItems + _centeredItems ;

     return Container(
     padding:  index >= _aboveItems && index < _belowItems ? EdgeInsets.all(_middlePadding) : EdgeInsets.all(_edgesPadding) ,
     child: Card(
     child: Container(
       height: _itemSize,
         child: new Row(
             mainAxisAlignment: MainAxisAlignment.center,
             children: <Widget>[
               Text(index.toString(), style: TextStyle(fontSize: 36.0, fontWeight: FontWeight.bold)),
               ]
             ),
           ),
         ),
       );
       }),
     );
   }
 }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何检测ListView Item的位置? 的相关文章

随机推荐

  • 如何检测 Perl 正则表达式中有多少个捕获组?

    我有一堆perl questions tagged perl regexp questions tagged regexps 在脚本中 我想知道其中有多少个捕获组 更准确地说 我想知道在真正的匹配操作中实际使用它们之前 如果 和 数组匹配
  • 如何配置 Xcode 将“{”放在生成的文件中我想要的位置

    我知道这在程序员中是一个相当有争议的问题 但在开发时 我喜欢我的 IDE 将左大括号放置在方法 接口 控件声明下方 以用于说明目的 这就是 Xcode 自动生成带有 结尾的骨架方法的方式 void isTrue BOOL input if
  • 使用 Git,子树合并具有子模块的外部项目的最佳方法是什么?

    我正在使用 Git 存储库来存储与我正在开发的网站相关的所有内容 该存储库保存与该站点相关的所有文件 包括文档 模型 原始分层图像等 以及我放入的 Web 根目录内容www子目录 我现在想要开始将我选择使用的 CMS 与项目的其余部分集成
  • 如何开始编写合成 WM?

    我想编写一个基本的硬件加速窗口管理器 所以我一直在寻找一些有关如何开始的文档 但我只找到了本教程 http wingolog org archives 2008 07 26 so you want to build a compositor
  • 在 Maybe 类型上应用函数?

    Haskell 新手 我不知道如何将函数 a gt b 应用于列表 也许 a 并获取 也许 b maybeX a gt b gt Maybe a gt Maybe b 该函数应该做与 map 完全相同的事情 将函数 f 应用于 Maybe
  • 为什么我的生成器在迭代后变空了?

    我有一个生成器通过我正在使用的库的函数调用返回给我 然后 我将此生成器传递给一个函数 该函数迭代它并对每个项目执行一系列逻辑 然后我想在调用该函数后引用同一个生成器 然而 生成器似乎不再拥有 生成任何物品 代码是这样的 let myGene
  • Twitter API:如何获取用户 ID、谁喜欢特定推文?

    我正在尝试获取有关将特定推文添加到收藏夹的用户的信息 但我在文档中找不到它 Twitter 可以做到这一点 但没有将此方法作为 API 提供 这是不公平的 显然 做到这一点的唯一方法是scrape http web archive org
  • PySpark 在终端中执行时出现“非法反射访问操作”

    我已经在本地安装了 Spark 和组件 并且能够在 Jupyter iPython 中以及通过 Spark submit 执行 PySpark 代码 但是收到以下警告 WARNING An illegal reflective access
  • 我可以在 Eclipse 中运行 Spark 单元测试吗

    最近我们从使用烫洗改为使用火花 我使用eclipse和eclipse的scala IDE来编写代码和测试 测试在 twitter 的 JobTest 类上运行良好 任何使用 JobTest 的类都可以自动作为 Eclipse 中的 scal
  • 如何在R中根据样本id标记PCA点

    我有一个使用对象 选项卡 制作的 PCA 图 gt tab sample id EV1 EV2 1 G495 0 0074331465 3 837111e 02 2 G1 0 0141980856 6 964191e 02 3 G10 0
  • 如何从 gem 资产中覆盖单个文件来进行资产:预编译?

    情况 我使用带有自己的 JavaScript 和样式表资源的 gem 这个 gem 使用标准的 application js 和 application css 清单来要求其所有资产 gem app assets javascripts g
  • System.setErr() 干扰 Logger

    在较大的程序中 我使用静态java util logging Logger实例 但重定向System err连续到几个不同的文件 这Logger第二次尝试重定向时无法记录System err 这是一个显示问题的测试程序 import jav
  • 更改收件人短信的“发件人”字段

    我希望短信的收件人看到我的公司名称 而不是电话号码 这怎么可能 我目前正在使用 Twilio 但我愿意接受涉及其他服务的建议 对于那些看过 philnash 的答案但仍然遇到问题的人 请阅读本文 我正在使用 twilio ruby gem
  • 预加载的图像再次加载

    我正在预加载我的图像componentDidMount像这样 photos forEach picture gt const img new Image img src picture url 但是当我尝试像这样插入图像时 在另一个组件中
  • 如何在 C# 中迭代​​ Collection 时添加或删除对象

    我试图在迭代集合时删除对象 但我遇到了例外 我怎样才能实现这个目标 这是我的代码 foreach var gem in gems gem Value Update gameTime if gem Value BoundingCircle I
  • 出现未捕获类型错误:将 Browserify 与 Nutritionix NodeJS 客户端库一起使用时,fs.readdirSync 不是一个函数

    我正在尝试使用 Node 构建一个演示应用程序 但我不断收到未捕获的类型错误 fs readdirSync 不是函数尝试使用 Nutrionix NodeJS 客户端库时出错 https github com nutritionix nod
  • SAP 通过 VBA 提取到 EXCEL 内存不足

    我正在尝试通过我记录的 SAP 脚本将 SAP 事务提取到 txt 文档中 最后将其提取到我的 Excel 工作表中 当我在 SAP 中运行脚本时 它会通过将值复制到我的 txt 文档中来工作 所以看来我的问题是 excel 中的宏没有激活
  • 如何使用 sed/awk 提取两个模式之间的文本

    我知道这个问题已经被问了 1000 次了 但是我读了很多类似的问题 但仍然没有找到正确的方法来做到这一点 我需要从如下所示的行中提取一个数字 version 4 9 123M info version 2034 2 description
  • 如何对 Eloquent 子查询进行排序

    我有两个连接的表 团队和成员 这些模型通过 n m 关系连接 在我的团队视图中 我将创建一个 foreach 循环来获取所述团队的成员 如下所示 foreach team gt teammember as member member gt
  • 如何检测ListView Item的位置?

    如何根据列表视图项目在屏幕上的位置向其添加填充 例如 如果 listView 项位于屏幕中间 我希望将其内边距增加 10 点 如果 listView 项位于屏幕顶部附近 我希望将其内边距增加 15 点 您可以通过附加一个来实现这一点Scro