flutter 实现左侧菜单(仿淘宝-商品分类 点击滚动到指定位置)

实现代码如下

double itemHeight=40.0;

Widget  left=ListView.builder(

        shrinkWrap:true,

        itemExtent:itemHeight,//确定每一个item的高度 会让item加载更加高效

        controller: _scrollController,

        itemCount: widget.data==null?0:widget.data.length,

        itemBuilder: (context,index){

          Widget list=InkWell(

            child:Container(

              width: 83.0,

              height: itemHeight,

              child: Center(

                child: Text(widget.data[index].name,

                    overflow: TextOverflow.ellipsis,

                    style: TextStyle(fontSize: 16.0),

                  ),

                ),

            ),

            onTap: (){

                setState(() {

                  activeIndex=index; 

                });

               ///屏幕高度减AppBar高度和底部高度

               double mediaHeight=(MediaQuery.of(context).size.height)-75.0-50.0;

               ///Item总数

               int itemCount=widget.data.length;

               ///滚动高度

               double scrollHeight=itemCount*itemHeight;

               ///公式如下:当前点击的Item/Item总数*滚动高度-屏幕高度/2+Item的高度/2

               double _top=activeIndex/itemCount*scrollHeight-mediaHeight/2+itemHeight/2;

              //  print("Top值:$_top 当前Item$activeIndex Item总数$itemCount 滚动条高度:$scrollHeight 屏幕高度$mediaHeight Item的高度:$itemHeight");

              _scrollController.animateTo(_top,duration: Duration(milliseconds: 300,),curve: Curves.fastOutSlowIn);

              widget.onSelected(widget.data[index].children);

            },

          );

          list=Row(

            crossAxisAlignment: CrossAxisAlignment.center,

            children: <Widget>[

              Container(

                decoration: BoxDecoration(color: activeIndex==index? AppTheme.color_red:AppTheme.backageColor),

                height: 30.0,

                width: 3.0,

                ),

                Material(type: MaterialType.transparency,child: list)

            ],

          );

          return list;

        },

      );

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在使用Flutter构建WhatsApp之前,我们创建了一个带有选项卡和导航的基本appbar。 今天,我们将使用...
    Sper_CL阅读 967评论 0 0
  • 1. 纵使不再握渊虹,木剑仍可败诸雄 2. 他叫盖聂,是个男人 3. 世上剑仙三千万,见他亦是尽胆寒 4. 你说清...
    此生惜白墨阅读 313评论 1 2
  • 娶了红玫瑰,久而久之,红的变了墙上的一抹蚊子血,白的还是“床前明月光”; 娶了白玫瑰,白的便是衣服上沾的一粒饭黏子...
    万里风来韩小邪阅读 72评论 0 0