flutter 小部件之间的幻灯片动画

k3fezbri 于 2023-10-22 发布在 Flutter

关注(0)|答案(1)|浏览(145)

我正在开发一个应用程序，我需要在屏幕上显示动画。我做了一些事情，但所需的输出并不是我真正想要的。我附加图像和原型的动画链接。基本上，我想点击catgeory并显示动画，将相应的类别颜色从选定的类别移动到点击的类别，并希望移动内容从左或右出现。
Animation prototype link

Row(
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: VisitCardCategory.values
                            .map((e) => AnimatedBuilder(
                                animation: _animationController,
                                builder: (context, child) {
                                  return SlideTransition(
                                    position: Tween<Offset>(
                                      begin: Offset(
                                          _animationController.value, 0.0),
                                      end: const Offset(0.0, 0.0),
                                    ).animate(CurvedAnimation(
                                        parent: _animationController,
                                        curve: Curves.easeIn)),
                                    child: FilterWidget(
                                      onTap: () {
                                        filterByCategory(category: e);
                                      },
                                      category: e,
                                      selectedColor: e == selectedCategory
                                          ? e.color
                                          : Colors.white,
                                      controller: _animationController,
                                    ),
                                  );
                                }))
                            .toList()),

flutter

来源：https://stackoverflow.com/questions/77195981/a-slide-animation-in-between-widgets

1条答案

按热度按时间

pod7payv1#

实现这一目标的第一步是在Row中创建选项卡：

Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          _SwapButton(0, 'First Page'),
          _SwapButton(1, 'Second Page'),
          _SwapButton(2, 'Third Page'),
          _SwapButton(3, 'Fourth Page'),
          _SwapButton(4, 'Fifth Page'),
        ],
      ),

现在，您将创建页面视图：

Expanded(
        child: PageView(
          controller: _pageController,
          onPageChanged: (index) {
            setState(() {
              _currentPageIndex = index;
            });
          },
          children: [
            Center(
              child: Text('Content for Tab 1'),
            ),
            Center(
              child: Text('Content for Tab 2'),
            ),
            Center(
              child: Text('Content for Tab 3'),
            ),
            Center(
              child: Text('Content for Tab 4'),
            ),
            Center(
              child: Text('Content for Tab 5'),
            ),
          ],
        ),
      ),

现在，您将创建使动画工作的小部件：

Widget _SwapButton(int index, String label) {
return ElevatedButton(
  onPressed: () {
    _pageController.animateToPage(
      index,
     //This is for the sliding effect to make the data slide between tabs
      duration: Duration(milliseconds: 500),
      curve: Curves.easeInOut,
    );
  },
  style: ButtonStyle(
  //Style button as you want 
    ),
  ),
  //add label to button
  child: Text(label),
);
 }

希望这能帮助你实现你想要的！如果工作做检查正确的答案标记！
参考链接：https://api.flutter.dev/flutter/widgets/PageController/animateToPage.html

赞(0）回复(0）举报 2023-10-22

我来回答

flutter 小部件之间的幻灯片动画

1条答案

相关问题

热门标签

最新问答