Flutter Row 滚动效果动画答案

【问题标题】：Flutter Row scroll Effect animationFlutter Row 滚动效果动画
【发布时间】：2020-12-14 22:46:04
【问题描述】：

我当前的项目有一个可以正常工作的可滚动行，但我找不到一种方法来制作某种静态滚动，当您滚动到某个项目时，该项目会自动居中。

这是我目前拥有的：

当卡片滚动时，它们会停留在滚动完成时的位置：

我想要实现的效果是当滚动到下一张卡片时卡片在中心对齐。

有没有真正像这样工作的小部件？

【问题讨论】：

您可以使用浏览量生成器通过某些视口完成相同的操作
你可以试试flutter_swiper
@DungNgo 谢谢，我会把它保存到另一个项目中
@meditat 谢谢，这正是我所需要的。 PageView 小部件完成了所有工作
@JoséLuna 欢迎

标签： flutter dart widget

【解决方案1】：

试试这个，

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);
} 
}

【讨论】：

【解决方案2】：

解决方法很简单：

 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 小部件并提供填充顶部，因为小部件的高度是全屏。

【讨论】：