Question

我正在尝试构建一个小部件，允许用户通过拖动来更改值。与Slider相似，但不同之处在于在“值指示器”保持固定的同时拖动背景。

我已经禁用了该功能，但是我不确定如何正确设置背景图像的动画以使其滑动/拖动。

import 'package:flutter/material.dart';

class SliderTest extends StatefulWidget {
@override
  _SliderTestState createState() => _SliderTestState();
}

class _SliderTestState extends State<SliderTest> {
double foo = 100.0;

@override
Widget build(BuildContext context) {
return new Scaffold(
  appBar: new AppBar(
    title: new Text('SliderTest'),
  ),
  body: new Builder(builder: (context) {
    return new Center(
      child: new Column(
        children: <Widget>[
          new Text("$foo"),
          new Row(children: <Widget>[
            new Expanded(
              child: new GestureDetector(
                child: new Container(
                  height: 80.0,
                  decoration: new BoxDecoration(
                    image: new DecorationImage(
                      image: new AssetImage("resources/scale.png"),
                      repeat: ImageRepeat.repeatX
                    )
                  ),
                ),
                onHorizontalDragUpdate: (d) { 
                  if(d.primaryDelta >= 1.0 || d.primaryDelta <= - 1.0)
                  {
                    //print(d.primaryDelta); 
                    setState(() {
                      foo += d.primaryDelta;
                    });
                  }
                },
                )
              )
            ],
          ),
        ],
      ),
    );
  })
);
}
}

如何使背景图像与拖动同步“移动”？

Answer 1

让我知道这是否是您想要的，基本上，我在您的Transform内放了一个container小部件，并在其中放入了Image小部件作为您的图片。

  import 'package:flutter/material.dart';

  class SliderTest extends StatefulWidget {
  @override
    _SliderTestState createState() => _SliderTestState();
  }

  class _SliderTestState extends State<SliderTest> {
  double foo = 100.0;

  @override
  Widget build(BuildContext context) {
  return new Scaffold(
    appBar: new AppBar(
      title: new Text('SliderTest'),
    ),
    body: new Builder(builder: (context) {
      return new Center(
        child: new Column(
          children: <Widget>[
            new Text("$foo"),
            new Row(children: <Widget>[
              new Expanded(
                child: new GestureDetector(
                  child: new Container(
                    height: 80.0,
                    child: new Transform.translate(
                      offset: new Offset(foo, 0.0),
                      child: new Image.asset("resources/scale.png"),
                    ),
                  ),
                  onHorizontalDragUpdate: (d) { 
                    if(d.primaryDelta >= 1.0 || d.primaryDelta <= - 1.0)
                    {
                      //print(d.primaryDelta); 
                      setState(() {
                        foo += d.primaryDelta;
                      });
                    }
                  },
                  )
                )
              ],
            ),
          ],
        ),
      );
    })
  );
  }
  }

拖动时颤振动画背景图像

1 个答案: