flutter 中的 slidetransition 外观容器

Question

我需要让一个容器从屏幕向右滑开，同时让另一个容器从屏幕左侧滑入并停留在屏幕中央。它应该在单击继续后发生。我试过SlideTransition Widget，但我不知道如何实现，请帮助。enter image description here

Answer 1

你可以用 PageView 来完成。首先像这样定义一个页面控制器： final pageCtrlr = PageController();

别忘了处理它。

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

定义一个跟踪当前 Container 的 int： int currentContainer = 0;

同时为Containers的数量定义一个int： final int numberOfContainers = 10; 例如我设置if为10。（这个数字应该和你的PageView中children的数量相同）

然后将 PageView 添加到您的小部件树。

PageView(
controller: pageCtrlr, // assign your page controller to the page view
physics: NeverScrollableScrollPhysics(), // disables scrolling
children: <Widget>[...YourWidgets...],
onPageChanged: (int index) => setState(()=>currentContainer=index),
)

然后将此函数作为 onPressed 添加到更改容器的按钮上。

void changeContainer(){
if (currentContainer + 1 > numberOfContainers - 1) return;

pageCtrlr.animateToPage(currentContainer + 1,
duration: Duration(miliseconds: 750), curve: Curves.linear,
// you can change the duration of the animation and curve
);
}

flutter 中的 slidetransition 外观容器

slidetransition appearence container in flutter

animation

containers

slide

dart

flutter