如何在颤动中捕捉滚动效果？答案

【问题标题】：How to snap scroll effect in flutter?如何在颤动中捕捉滚动效果？
【发布时间】：2019-12-25 17:47:40
【问题描述】：

使用正常的滚动效果，您可以随意滚动，但我想要一个可滚动的列表，但只能滚动完整的小部件或小部件的 1/4。

类似这样的：-

如何获得滚动效果？

【问题讨论】：

标签： flutter scroll widget

【解决方案1】：

您可以使用PageView。

这里是示例代码。它有分页动画。它还将侦听器附加到PageController，这对于获取当前状态很有用。

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 StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var _controller = PageController(viewportFraction: 0.6);
  var _color = "";

  @override
  void initState() {
    super.initState();
    _controller.addListener(() {
      if (_controller.page < 0.5) {
        setState(() {
          _color = "yellow";
        });
      }
      if (_controller.page >= 0.5 && _controller.page < 1.5) {
        setState(() {
          _color = "red";
        });
      }
      if (_controller.page >= 1.5 && _controller.page < 2) {
        setState(() {
          _color = "blue";
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
      children: [
        SizedBox(
          height: 200,
        ),
        Text(
          _color,
          style: TextStyle(fontSize: 40),
        ),
        SizedBox(
          height: 100,
          child: PageView(
            controller: _controller, 
            children: [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: SizedBox(
                  child: Container(
                    color: Colors.amber,
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: SizedBox(
                  width: 200,
                  child: Container(
                    color: Colors.red,
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: SizedBox(
                  width: 200,
                  child: Container(
                    color: Colors.lightBlue,
                  ),
                ),
              ),
            ],
          ),
        ),
      ],
    ));
  }
}

【讨论】：