如何在顫動中創建具有左右滑塊的影片堆疊卡片？-有解無憂

我希望它看起來像影像，但我找不到方法，請幫忙？我正在嘗試為此使用 carousel_slider、pub.dev/packages/flutter_tindercard、flutter_multi_carousel、FlutterCardSwipe 插件并嘗試修改此插件，但它并沒有實作完全像視頻一樣的效果。

如何在顫動中創建具有左右滑塊的影片堆疊卡片？

uj5u.com熱心網友回復：

考慮在 Stack 中使用 AnimatedPositioned。您可以使用它們的位置（上、下、左、右）和大小（高度、寬度）的值進行游戲。

這是 Flutter 團隊制作的視頻：https ://www.youtube.com/watch?v=hC3s2YdtWt8

認為這只是一種方法，有很多方法。

uj5u.com熱心網友回復：

使用AnimatedContainer和更改活動容器的簡單方法Timer。

在dartPad上運行

class AnimC3 extends StatefulWidget {
  const AnimC3({Key? key}) : super(key: key);

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

class _AnimC3State extends State<AnimC3> {
  final duration = const Duration(seconds: 1);

  int _currentIndex = 0;

  late Timer _timer;

  @override
  void initState() {
    _timer = Timer.periodic(duration, (timer) {
      setState(() {
        _currentIndex  ;
        if (_currentIndex > 2) _currentIndex = 0;
      });
    });
    super.initState();
  }

  @override
  void dispose() {
    _timer.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SizedBox(
          width: 200,
          child: Row(
            children: [
              AnimatedContainer(
                duration: duration,
                width: _currentIndex == 0 ? 100 : 50,
                color: Colors.purpleAccent,
              ),
              AnimatedContainer(
                duration: duration,
                color: Colors.cyanAccent,
                width: _currentIndex == 1 ? 100 : 50,
              ),
              AnimatedContainer(
                duration: duration,
                color: Colors.red,
                width: _currentIndex == 2 ? 100 : 50,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/420532.html

標籤：

上一篇：如何用Jqueryanimate()中的變換替換邊距影片以修復滯后的多滑塊

下一篇：p5.j??s：用直線而不是橢圓制作影片螺旋？