前言

昨天的一个需求，需要完成侧滑删除这个功能，现在Dismissible的功能需求满足不了现在的项目需求，就自己封装一个小组将

主要技术

涉及到叠层，动画，状态管理

实现效果

在这里插入图片描述

实例代码分析

叠层的使用

				child: Stack(
                  children: <Widget>[
                    _item(context,index,imageList),			//底部的列表
                    operationArea(context,index)			//控制按钮的区域
                  ],
                ),

状态管理的使用


//控制操作区域是否打开
Widget operationArea(context,index){

  if(Provide.value<AttentionProvide>(context).operationArea==index){
    return attentionOperation();
  }else{
    return Container(
      child: null,
    );
  }
}

控制按钮的布局和动画

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

  _attentionOperationState createState() => _attentionOperationState();
}

class _attentionOperationState extends State<attentionOperation> with SingleTickerProviderStateMixin{
  
   //动画控制器
  Animation<double> tween;
  AnimationController controller;

   /*初始化状态*/
  initState() {
    super.initState();

    /*创建动画控制类对象*/
    controller = new AnimationController(
        duration: const Duration(milliseconds: 200),
        vsync: this);

    /*创建补间对象*/
    tween = new Tween(begin: 0.0, end: 1.0)
        .animate(controller)    //返回Animation对象
      ..addListener(() {        //添加监听
        setState(() {
         // print(tween.value);   //打印补间插值
        
      });
    });
    controller.forward();       //执行动画
  }
  
  @override
  Widget build(BuildContext context) {
    return Container(
       child: Container(
        height: 140,
        width: 300,
        margin: EdgeInsets.fromLTRB(400-240*controller.value, 0, 0, 0),
        child:ListView(
          scrollDirection: Axis.horizontal,
          children: <Widget>[
            InkWell(
              onTap: (){
                controller.reverse();			//动画往返现执行
              },	
              child: Container(
                width: 100,
                color: Colors.blue,
                child: Center(
                  child: Text(
                    '置顶',
                    style: TextStyle(
                      color: Colors.white
                    ),
                  ),
                ),
              ),
            ),
            InkWell(
              onTap: (){
                controller.reverse();
              },
              child: Container(
                width: 100,
                color: Colors.red,
                child: Center(
                  child: Text(
                    '删除',
                    style: TextStyle(
                      color: Colors.white
                    ),
                  ),
                ),
              ),
            )
          ],
        )
      ),
    );
  }
}

列表布局代码

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

  _AttPageState createState() => _AttPageState();
}

class _AttPageState extends State<AttPage> {
   @override
  Widget build(BuildContext context) {

    

    List imageList=[
      'https://img.alicdn.com/imgextra/i3/29795688/O1CN01KW7JKw1rt9Mx5rvUd_!!0-saturn_solar.jpg_220x220.jpg_.webp',
      'https://img.alicdn.com/imgextra/i3/57832447/O1CN01vAbfBB1TwlhtTBAas_!!0-saturn_solar.jpg_220x220.jpg_.webp',
      'https://img.alicdn.com/imgextra/i1/34525248/O1CN01jCNkMp1odd5Q8JdZa_!!2-saturn_solar.png_220x220.jpg_.webp',
      'https://img.alicdn.com/imgextra/i1/32794171/O1CN01pGHpqf1ggMWEBBfPn_!!0-saturn_solar.jpg_220x220.jpg_.webp',
      'https://img.alicdn.com/imgextra/i4/23653277/O1CN010cqOWE1a4uPGFMauo_!!0-saturn_solar.jpg_220x220.jpg_.webp',
      'https://img.alicdn.com/imgextra/i1/113995386/O1CN015JHEhb1pepl0Paa6E_!!0-saturn_solar.jpg_220x220.jpg_.webp',
      'https://img.alicdn.com/imgextra/i2/31099960/TB2zDAQcZfpK1RjSZFOXXa6nFXa_!!0-saturn_solar.jpg_220x220.jpg_.webp',
      'https://img.alicdn.com/imgextra/i3/46531393/O1CN014gTo6E1MA2GAPaeqt_!!0-saturn_solar.jpg_220x220.jpg_.webp'
    ];

    return Scaffold(
      body: Provide<AttentionProvide>(
      builder: (context,child,val){
        return ListView.builder(
            scrollDirection: Axis.vertical,
            itemCount: imageList.length,
            itemBuilder: (context,index){
              return GestureDetector(
                onHorizontalDragUpdate :(startDetail){
                  if(startDetail.delta.direction>0){
                    Provide.value<AttentionProvide>(context).isOpen(index);                   //控制那个列表打开操作列表
                  }
                },

                child: Stack(
                  children: <Widget>[
                    _item(context,index,imageList),
                    operationArea(context,index)
                  ],
                ),
              );
              
            },
          );
      }),
    );
  }
}




Widget _item(context,index,imageList){
  return InkWell(
    onTap: (){
      Application.router.navigateTo(context, "/attention?message=$index");                    //跳转到另外一个页面
    },
    child: Container(
      margin: EdgeInsets.fromLTRB(10, 20, 0, 0),
      child: Column(
        children: <Widget>[
          Row(
            children: <Widget>[
              Container(                                                                    //图片区域
                width: 100,
                height: 100,
                child: Image.network(imageList[index]),
              ),
              /****************start 信息区域************************/
              Container(
                margin: EdgeInsets.only(left: 5),
                child: Column(
                  children: <Widget>[
                    Container(
                      margin: EdgeInsets.fromLTRB(5, 10, 0, 0),
                      child:Row(
                        children: <Widget>[
                          Text(
                            'SKU:123456'
                          ),
                          Container(
                            margin: EdgeInsets.only(left: 15),
                            child: Text(
                            'SKU:123456'
                            ),
                          )
                        ],
                      )
                    ),
                   Container(
                      margin: EdgeInsets.fromLTRB(5, 10, 0, 0),
                      child:Row(
                        children: <Widget>[
                          Text(
                            'SKU:123456'
                          ),
                          Container(
                            margin: EdgeInsets.only(left: 15),
                            child: Text(
                            'SKU:123456'
                            ),
                          )
                        ],
                      )
                    ),
                    Container(
                      margin: EdgeInsets.fromLTRB(5, 10, 0, 0),
                      child:Row(
                        children: <Widget>[
                          Text(
                            'SKU:123456'
                          ),
                          Container(
                            margin: EdgeInsets.only(left: 15),
                            child: Text(
                            'SKU:123456'
                            ),
                          )
                        ],
                      )
                    ),

                    /****************end 信息区域************************/
                  ],
                )
              ),
            ],
          ),
          Divider()
        ],
      )
    ),
  );
}


//控制操作区域是否打开
Widget operationArea(context,index){

  if(Provide.value<AttentionProvide>(context).operationArea==index){
    return attentionOperation();
  }else{
    return Container(
      child: null,
    );
  }
}