颤动行滚动效果动画

问题描述

我当前的项目有一个可滚动的行,效果很好,但是我找不到一种进行静态滚动的方法,当您滚动到某个项目时,该项目会自动居中。

这是我目前拥有的:

Flutter movie ui

滚动卡片时,它们停留在滚动结束时的位置:

Flutter movie ui

我要实现的效果是,滚动到下一张卡片时,卡片会自动居中对齐。

Flutter movie ui

是否有一个实际上可以像这样工作的小部件?

解决方法

尝试一下,

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255,18,32,47);

void main() {
 runApp(MyApp()); 
}

class MyApp extends StatelessWidget {

final List<String> images = ["Me","You","Foo","Baa"];

final PageController controller = PageController(viewportFraction:0.8);

@override
Widget build(BuildContext context) {
return MaterialApp(
  theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),debugShowCheckedModeBanner: false,home: Scaffold(
    body: PageView.builder(
      controller: controller,itemCount: images.length,itemBuilder: (context,index){
        return Container(
          margin: EdgeInsets.all(16),child: Center(child:Text(images[index])),color: Colors.grey.shade200
        );

      }
    ),),);
 }
 }

class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
 return Text('Hello,World!',style: Theme.of(context).textTheme.headline4);
} 
}

Here is the output of this code

,

解决方案很简单:

 Padding(
      padding: const EdgeInsets.symmetric(vertical: 80),child: Container(
        child: PageView(
          controller: controller,scrollDirection: Axis.horizontal,pageSnapping: true,physics: BouncingScrollPhysics(),children: [CardMovie(),CardMovie(),CardMovie()],)

使用PageView窗口小部件并在其顶部填充边框,因为窗口小部件的高度为全屏显示。

enter image description here