Flutter:ListView不滚动，不反弹 [英] Flutter: ListView not scrollable, not bouncing

问题描述

我有以下示例(在iPhone X，iOS 11上测试):

I have the following example (tested on an 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来跟踪偏移量时，滚动的行为会发生变化:

In this case the ListView acts like expected. I can scroll beyond the viewport and the ListView bounces back again (typical iOS behavior). But when I add a ScrollController to track the offset, the behavior of the scrolling changes:

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也无济于事.

In this case the scrolling is not possible anymore. Why is it that when I add a ScrollController, that the scrolling is not possible anymore? Also adding physics: new BouncingScrollPhysics(), to the ListView does not help.

感谢您的帮助:)

推荐答案

要始终在ListView上启用滚动，可以使用AlwaysScrollableScrollPhysics类包装所需的原始滚动体.更多详细信息此处.如果需要，可以指定parent或依靠默认值.

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

这篇关于Flutter:ListView不滚动，不反弹的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！