flutter获取widget渲染后端尺寸

在Flutter开发中,遇到一个问题:在详情页滚动时需要切换上方的Tab。解决办法是动态获取每个item的高度,通过监听滚动距离来切换Tab。关键代码使用了WidgetsBinding.addPostFrameCallback回调,在渲染完成后获取item的尺寸。遇到的挑战是如何动态获取尺寸,LayoutBuilder或Builder widget在此处发挥了作用。
摘要由CSDN通过智能技术生成

简介:我在练习flutter详情页的时候,在滚动详情页的时候上面的tab要发生切换。所以是用到了获取每个item的高度,然后再通过监听scroll滑动的距离对比每个位置来切换上面的tab。主要的难度在于怎么动态的获取item的高度,查了好多篇的文章最后找见了一个是用的那就是添加一个回调,当渲染完毕后获取当前item的congtext的尺寸。

Container(
                        key: key3,
                        width: deviceWidth,
                        margin: EdgeInsets.only(top: 5),
                        padding: EdgeInsets.all(5),
                        decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius:
                                BorderRadius.all(Radius.circular(15))),
                        child: LayoutBuilder(builder: (context,contraints){
                          //详情的高度
                          var widgetsBinding = WidgetsBinding.instance;
                          widgetsBinding.addPostFrameCallback((callback) {
                            gdHeight =context.size.height;
                            print("详情的高度:${context.size.height}");
                          });
                          return Column(

我只写了一部分代码,主要关键代码是

child: LayoutBuilder(builder: (context,contraints){
                          //详情的高度
                          var widgetsBinding = WidgetsBinding.instance;
                          widgetsBinding.addPostFrameCallback((callback) {
                            gdHeight =context.size.height;
                            print("详情的高度:${context.size.height}");
                          });

这里需要一个context,我用的是LayoutBuilder,其实是用Builder就可以了。我使用LayoutBuilder是因为当时想是用contraints,但它其实是获取当前组件在父组件的位置,如果该container没有指定尺寸的话,它得到的是一个Infinity,这个是占用父组件最大宽度或高度。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

枣泥馅

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值