控制滚动条向右滚动_Flutter - 自定义物理滚动

在本文中，我们将编写自己的内容ScrollPhysics来更改中滚动的行为ListView。

KISS(Keep It Simple… pleaSe)

重复出现的情况，我们有一组页面或幻灯片要迭代。

Default PageView

执行此操作的代码非常简单。我们只需要使用PageView默认属性即可。

import 'dart:math';import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: MyHomePage(), ); }}class MyHomePage extends StatelessWidget { final List pages = List.generate(4, (index) => index); @override Widget build(BuildContext context) { return Scaffold( body: SafeArea( child: PageView.builder( itemCount: pages.length, itemBuilder: (context, index) { return Container( color: randomColor, margin: const EdgeInsets.all(20.0), ); }, ), ), ); } Color get randomColor => Color((Random().nextDouble() * 0xFFFFFF).toInt() << 0).withOpacity(1.0);}

真棒。但是，

有时我们想给用户一个提示，或者也许不是真正的页面，而是列表中我们要迭代的元素。在这种情况下，如果当前元素仅填充视口的一小部分，这样我们就可以看到下一个(或上一个元素)的一部分，那就太好了。

不用担心，Flutter掩盖了一切。我们可以使用PageController。

PageView with viewportFraction

代码仍然非常简单。我们只需要将设置为viewportFraction要由列表中的当前元素填充的视口的比例。

class MyHomePage extends StatelessWidget { final List pages = List.generate(4, (index) => index); final _pageController = PageController(viewportFraction: 0.8); @override Widget build(BuildContext context) { return Scaffold( body: SafeArea( child: PageView.builder( controller: _pageController, itemCount: pages.length, itemBuilder: (context, index) { return Container( color: randomColor, margin: const EdgeInsets.all(20.0), ); }, ), ), ); }

真棒。但是，