Flutter：ListView不滚动，不反弹

Question

我有以下示例（在iPhone X，iOS 11上测试）：

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return new ListView(
      children: <Widget>[
        new Container(
          height: 40.0,
          color: Colors.blue,
        ),
        new Container(
          height: 40.0,
          color: Colors.red,
        ),
        new Container(
          height: 40.0,
          color: Colors.green,
        ),
      ]
    );
  }

}

在这种情况下，ListView的行为与预期的一样。我可以滚动到视口之外，并且ListView会再次反弹（典型的iOS行为）。但是，当我添加ScrollController来跟踪偏移量时，滚动的行为会发生变化：

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  ScrollController _controller = new ScrollController();

  @override
  Widget build(BuildContext context) {
    return new ListView(
      controller: _controller,
      children: <Widget>[
        new Container(
          height: 40.0,
          color: Colors.blue,
        ),
        new Container(
          height: 40.0,
          color: Colors.red,
        ),
        new Container(
          height: 40.0,
          color: Colors.green,
        ),
      ]
    );
  }
}

在这种情况下，将无法再滚动。为什么在添加ScrollController时无法再滚动？同样添加physics: new BouncingScrollPhysics(),到ListView也无济于事。

谢谢你的帮助 ：）

Answer 1

如果你在 Flutter Web 上遇到这个问题，那么你应该用ScrollConfiguration包装 listview 。在 ScrollConfiguration 行为参数中添加 PointerDeviceKind.mouse。你可以看例子。

ScrollConfiguration(
behavior: ScrollConfiguration.of(context).copyWith(dragDevices: {
  PointerDeviceKind.touch,
  PointerDeviceKind.mouse,
},),
child: ListView(
  controller: _controller,
  physics: const AlwaysScrollableScrollPhysics(),
  scrollDirection: Axis.horizontal,
  children: <Widget>[
  
      for (int index = 0; index < showThumbnailList.length; index++) _thumbnail(showThumbnailList[index], index)
   
    // showThumbnailList.map((x) => _thumbnail(x) ).toList()),
  ],
),

),

Answer 2

使用AlwaysScrollableScrollPhysics始终让用户滚动的方式创建滚动物理。

对于具有弹跳效果的滚动只需提供物理： BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics) 到您的滚动条。这将使它始终可滚动，即使没有内容溢出

const BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics())

这是完整的例子

ListView(
  padding: EdgeInsets.all(8.0),
  physics: const BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics()),
  children: _listData.map((i) {
    return ListTile(
      title: Text("Item $i"),
    );
  }).toList(),
);

Answer 3

To always have the scroll enabled on a ListView you can wrap the original scroll phisics you want with the AlwaysScrollableScrollPhysics class. More details here. If you want you can specify a parent or rely on the default.

Here is your example with the option added:

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  ScrollController _controller = new ScrollController();

  @override
  Widget build(BuildContext context) {
    return new ListView(
        physics: const AlwaysScrollableScrollPhysics(), // new
        controller: _controller,
        children: <Widget>[
          new Container(
            height: 40.0,
            color: Colors.blue,
          ),
          new Container(
            height: 40.0,
            color: Colors.red,
          ),
          new Container(
            height: 40.0,
            color: Colors.green,
          ),
        ]
    );
  }
}

Answer 4

只需添加AlwaysScrollableScrollPhysics

ListView(
        physics: const AlwaysScrollableScrollPhysics(),
        children :  [...]
}