Флаттер анимировать фоновое изображение при перетаскивании - PullRequest
Новая
       13

Флаттер анимировать фоновое изображение при перетаскивании

0 голосов
/ 05 июля 2018

Я пытаюсь создать виджет, который позволяет пользователю изменять значение путем перетаскивания. Аналогично ползунку, но отличается тем, что фон перетаскивается, а «индикатор значения» остается фиксированным.

У меня отключена функциональность, но я не уверен, как правильно анимировать фоновое изображение, чтобы сделать его скользящим / перетаскивающим. 

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 Ответ

0 голосов
/ 06 июля 2018

Дайте мне знать, если это то, что вы хотите, в основном я поместил виджет 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;
                      });
                    }
                  },
                  )
                )
              ],
            ),
          ],
        ),
      );
    })
  );
  }
  }
...