flutter 向左滑动,显示删除按钮

939 阅读1分钟
class CollectCtn extends StatefulWidget {
  @override
  _CollectCtnState createState() => _CollectCtnState();
}

class _CollectCtnState extends State<CollectCtn> {
  bool loading = true;
  bool noMore = false;

  @override
  void initState() {
    super.initState();
    this.getList();
  }

  getList() {
    print('11111111');
//    this.list.add(1);
    this.loading = false;
  }

  List list = [    {"left": 0.0},    {"left": 0.0}  ];

  @override
  Widget build(BuildContext context) {
    HYSizeFit.initialize(context);
    int deleteWidth = 70;
    if (loading) {
      return Center(
          child: Text(
        'loading...',
        style: TextStyle(color: Colors.grey, fontSize: 14.px),
      ));
    } else {
      if (noMore) {
        return Center(
            child: Text(
          '暂无收藏',
          style: TextStyle(color: Colors.grey, fontSize: 14.px),
        ));
      } else {
        return ListView.builder(
          itemCount: list.length,
          itemBuilder: (context, index) {
            return Container(
              width: 375.px,
              height: 105.px,
              child: Stack(
                alignment: Alignment.centerRight,
                children: [
                  Container(
                    width: deleteWidth.px,
                    color: Color(0xFF536EE1),
                    alignment: Alignment.center,
                    child: GestureDetector(
                      onTap: () {
                        print('取消收藏函数执行');
                        setState(() => list.removeAt(index));
                      },
                      child: Text(
                        '取消收藏',
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 14.px,
                        ),
                      ),
                    ),
                  ),
                  Positioned(
                    left: list[index]["left"],
                    child: GestureDetector(
                      child: Container(
                        width: 375.px,
                        padding: EdgeInsets.symmetric(
                          horizontal: 18.px,
                          vertical: 14.px,
                        ),
                        decoration: BoxDecoration(
                            border: Border(
                              bottom: BorderSide(
                                width: 1.px,
                                color: Colors.black12,
                              ),
                            ),
                            color: Colors.white),
                        child: Stack(
                          children: [
                            ClipRRect(
                              borderRadius: BorderRadius.circular(4.px),
                              child: Image.network(
                                "http://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage.wangchao.net.cn%2Ffengjing%2F1324809443221.jpg&refer=http%3A%2F%2Fimage.wangchao.net.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628846518&t=6395f92c0fbbbffcee1ee5f82b61b13b",
                                color: Colors.grey,
                                width: 78.px,
                                height: 77.px,
                                fit: BoxFit.cover,
                              ),
                            ),
                            Container(
                              constraints: BoxConstraints(minHeight: 74.px),
                              padding: EdgeInsets.only(left: 90.px),
                              child: Column(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text(
                                    '针织休闲单衣拉链单西时尚小西装男士秋装外套',
                                    maxLines: 2,
                                    overflow: TextOverflow.ellipsis,
                                    style: TextStyle(
                                      fontSize: 14.px,
                                      color: Color(0xFF323232),
                                    ),
                                  ),
                                  Container(
                                    child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceBetween,
                                      crossAxisAlignment:
                                          CrossAxisAlignment.end,
                                      children: [
                                        Text(
                                          '¥599',
                                          style: TextStyle(
                                            color: Color(0xFF9D0101),
                                            fontSize: 15.px,
                                          ),
                                        ),
                                        Image.asset(
                                          "assets/images/home/more.png",
                                          width: 13.px,
                                          height: 4.px,
                                        )
                                      ],
                                    ),
                                  )
                                ],
                              ),
                            )
                          ],
                        ),
                      ),
                      onPanStart: (e) {
                        int i = 0;
                        setState(() {
                          list.forEach((element) {
                            if (i != index) {
                              list[i]['left'] = 0.0;
                            }
                            i++;
                          });
                        });
                      },
                      onPanUpdate: (DragUpdateDetails e) {
                        setState(() => list[index]["left"] += e.delta.dx);
                      },
                      onPanEnd: (e) {
                        setState(() => list[index]["left"] =
                            list[index]["left"] < -deleteWidth.px
                                ? -deleteWidth.px
                                : 0.0);
                      },
                    ),
                  ),
                ],
              ),
            );
          },
        );
      }
    }
  }
}