拖动时颤振动画背景图像

Question

我正在尝试构建一个允许用户通过拖动更改值的小部件。与 Slider 类似，但不同之处在于背景被拖动而 "value indicator" 保持固定。

我已经关闭了功能，但我不确定如何正确地为背景图像设置动画以使其具有 sliding/dragging 交互。

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;
                    });
                  }
                },
                )
              )
            ],
          ),
        ],
      ),
    );
  })
);
}
}

如何使背景图片"move"与拖动同步？

Answer 1

让我知道这是否是您想要的，基本上我在您的 container 中放置了一个 Transform 小部件，在其中我将您的图像作为 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;
                      });
                    }
                  },
                  )
                )
              ],
            ),
          ],
        ),
      );
    })
  );
  }
  }

拖动时颤振动画背景图像

Flutter animate background image on drag

flutter

flutter-animation