android - Flutter 滑动条动画

Question

我编写的这段代码基本上是一个滑动条，其固定值在 0 到 100 之间。当我按下随机播放按钮时，它的值（jovirometro.toDouble变量）会发生变化。我想做的只是一个从一个值滑到另一个值的动画。用户不与滑块交互。

这是它现在的样子

child: Container(
  height: 10,
  decoration: BoxDecoration(
    border: Border.all(color: Colors.black, width: 0.1),
    gradient: LinearGradient(
        colors: [
          Colors.red,
          Colors.redAccent,
          Colors.white,
          Colors.lightGreenAccent,
          Colors.green
        ]
    ),
    borderRadius: BorderRadius.circular(10),
  ),
  child: SliderTheme(
    data: SliderTheme.of(context).copyWith(
      activeTrackColor: Colors.white,
      inactiveTrackColor: Colors.white,
      trackHeight: 0.1,
      thumbColor: Colors.white,
      thumbShape: CustomSliderThumbShape(enabledThumbRadius: 10),
      overlayColor: Colors.white.withAlpha(1),
    ),
    child: Slider(
      min: 0,
      max: 100,
      value: jovirometro.toDouble(),
      onChanged: (value){setState((){});},
    ),
  ),
),

jovirometro 的变量是

var jovirometro = snapshot.data.documents[_word]['jovirometro'];

来自 Firestore 服务器，随机播放按钮更改“_word”参数。

标签： androidflutteranimationdart

Answer 1

我遇到了同样的问题并设法解决了我的问题AnimatedBuilder。

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      duration: const Duration(milliseconds: 300),
      vsync: this,
    );
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              height: 10,
              decoration: BoxDecoration(
                border: Border.all(color: Colors.black, width: 0.1),
                gradient: LinearGradient(colors: [
                  Colors.red,
                  Colors.redAccent,
                  Colors.white,
                  Colors.lightGreenAccent,
                  Colors.green
                ]),
                borderRadius: BorderRadius.circular(10),
              ),
              child: AnimatedBuilder(
                animation: _animationController,
                builder: (_, __) {
                  return SliderTheme(
                    data: SliderTheme.of(context).copyWith(
                      activeTrackColor: Colors.white,
                      inactiveTrackColor: Colors.white,
                      trackHeight: 0.1,
                      thumbColor: Colors.white,
                      overlayColor: Colors.white.withAlpha(1),
                    ),
                    child: Slider(
                      value: _animationController.value,
                      onChanged: null,
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _animationController.animateTo(Random().nextDouble());
        },
        child: Icon(Icons.autorenew),
      ),
    );
  }
}

我已经根据您的代码和我的解决方案创建了一个 codepen。

https://codepen.io/pczn0327/pen/XWXYKap