flutter 实现一个两个按钮的平滑的slider

import 'package:flutter/material.dart';

import 'package:fuligou/base/BaseWidget.dart';
import 'package:fuligou/util/HttpUtils1.dart';
import 'package:fuligou/util/HttpClient.dart';
import 'package:fuligou/util/WindowUtil.dart';

import 'package:fuligou/config/Config.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';

import 'package:flutter/cupertino.dart';

import 'package:fuligou/base/BaseWidget.dart';
import 'package:fuligou/util/HttpUtils1.dart';
import 'package:fuligou/util/HttpClient.dart';
import 'package:fuligou/util/WindowUtil.dart';

import 'package:fuligou/config/Config.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';

import 'package:flutter/cupertino.dart';

class SliderTest extends BaseWidget {
  double width;
  @override
  State<SliderTest> createState() => SliderTestState();
}

class SliderTestState extends BaseWidgetState<SliderTest> {
  @override
  void initState() {
    super.initState();
  }
  double marginLeft=0;
  double marginRight=0;
  double windWidth=300;
  String right="";
  String left="";
  double lastLeft=0;
  double lastRight=0;
  @override
  Widget build(BuildContext context) {
    windWidth= MediaQuery.of(context).size.width;
    return
      Container(
          height: 100,
//          margin: EdgeInsets.only(left: 20,right: 20),
          width: windWidth,
          child: Stack(
            children: <Widget>[
              Container(margin: EdgeInsets.only(top: 20,left: 12.5,right: 12.5),height: 2,color: Colors.red,),
//            Container(margin: EdgeInsets.only(top: 20,left: marginLeft,right: marginRight),height: 2,color: Colors.green,width: windWidth-marginLeft-marginRight,),
              Container(margin: EdgeInsets.only(top: 20,left: 12.5),height: 2,color: Colors.green,width:  marginLeft-12.5>0?marginLeft-12.5:0 ,),
              Container(margin: EdgeInsets.only(top: 20,right: 12.5,left: windWidth-marginRight-12.5),height: 2,color: Colors.green,width: marginRight-12.5>0?marginRight:0,),
              Positioned(child:
              GestureDetector(
                child:   Container(
                  margin: EdgeInsets.only(left: 0),
                  width: 25,
                  height: 55,

                  child: Column(children: <Widget>[Image.asset("assets/money.png"),Text(left)],),
                ),

                onHorizontalDragUpdate: (detai){
                  marginLeft=detai.globalPosition.dx;

                  left = "${(((marginLeft-12.5)/(windWidth-25))*100).floor().toInt()}";
                  lastLeft = marginLeft;
                  if((lastRight+marginLeft)<windWidth){
                    setState(() {

                    });
                  }

                },
                onHorizontalDragEnd: (detai){

                  if((lastRight+marginLeft)<windWidth){
                    setState(() {

                    });
                  }
//                  marginLeft = (lastRight+marginLeft)>windWidth?(windWidth-lastRight-1):marginLeft;
//                  setState(() {
//
//                  });
                },

              )

                ,
                left: marginLeft-12.5,
                top: 10,
              ),
              Positioned(child:
              GestureDetector(
                child:   Container(
                  width: 25,
                  height: 55,

                  child:
                  Column(children: <Widget>[Image.asset("assets/money.png"),Text(right)],)
                  ,
                ),

                onHorizontalDragUpdate: (detai){
                  marginRight=windWidth-detai.globalPosition.dx;
                  lastRight = marginRight;
                  print("${((1-(marginRight-12.5)/(windWidth-25))*100).floor().toInt()}");
                  right = "${((1-(marginRight-12.5)/(windWidth-25))*100).floor().toInt()}";
                  if((marginRight+lastLeft)<windWidth){
                    setState(() {

                    });
                  }

                },
                onHorizontalDragEnd: (DragEndDetails detai){
                  if((marginRight+lastLeft)<windWidth){
                    setState(() {

                    });
                  }
//                marginRight = (marginRight+lastLeft)>windWidth?(windWidth-lastLeft+1):marginRight;

                },
              )

                ,
                right: marginRight-12.5,
                top: 10,
              )
            ],
          )



      );
  }
}
发布了310 篇原创文章 · 获赞 69 · 访问量 46万+

猜你喜欢

转载自blog.csdn.net/nimeghbia/article/details/103497899
今日推荐