代码之家 › 专栏 › 技术社区 › TommyF

拖动时颤振动画背景图像

flutter-animation flutter

0

TommyF · 技术社区 · 6 年前

我试图构建一个小部件,允许用户通过拖动来更改值。类似于一个滑块,但不同的是在“值指示器”保持不变的情况下拖动背景。

我已经关闭了功能,但我不确定如何正确地设置背景图像的动画,使其具有滑动/拖动交互。

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

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

1 回复 | 直到 6 年前

1

diegoveloper 6 年前

让我知道如果这是你想要的,基本上我把 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;
                      });
                    }
                  },
                  )
                )
              ],
            ),
          ],
        ),
      );
    })
  );
  }
  }