flutter - 在 PageView 中使用 SingleChildScrollView

Question

在我的应用程序中，我有一个 PageView，每个页面都包含一本书的一页。当然，所有的页面都比视口(viewport)大，所以我在每个页面中使用了 SingleChildScrollView，这样我就可以滚动页面的内容。问题是当我到达页面底部时无法滚动到 PageView 的下一页(它试图继续滚动页面本身而不是页面 View )。有没有办法让我的应用程序在到达页面垂直边框时滚动页面？ (顶部和底部边框。)

这是我的代码

import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:penguinovel/core/source/chapter.dart';

class ChapterPage extends StatelessWidget {

  final List<Chapter> chapters;
  final int initialIndex;

  ChapterPage(this.chapters, this.initialIndex);

  @override
  Widget build(BuildContext context){

    return Scaffold(
        appBar: AppBar(title: Text(this.chapters[this.initialIndex].name, style: TextStyle(color: Colors.white),), backgroundColor: Colors.black,),
        body: PageView.builder(
          controller: PageController(initialPage: this.initialIndex),
          scrollDirection: Axis.vertical,
          itemCount: this.chapters.length,
          itemBuilder: (BuildContext context, int index) => buildChapter(this.chapters[index]),
        )
      );

  }

  Widget buildChapter(Chapter chapter) {
    return FutureBuilder<String>(future: chapter.getContent(), builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
      if(snapshot.hasData){
          return SingleChildScrollView(child: Html(data: snapshot.data));
      } else if (snapshot.hasError) {
          return Center(child: Text(snapshot.error.toString()));
      } else {
        return Center(child: CircularProgressIndicator());
      }
    });
  }
}

提前致谢:)

Answer 1

在尝试 flutter_easyrefresh 和另一个名为 pull_to_refresh 的库之后(我认为)。我偶然发现了许多我试图修复的错误。在这个过程中，我了解了一个叫做 BouncingScrollPhysics 的东西。

这为可滚动对象提供了一些越界内容，当用户停止按住他的手指时，这些内容会弹回。

使用它，我创建了一个 ScrollController 和一个等待滚动超出范围并经过一些调整后的监听器......它起作用了:)

这是代码片段

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:penguinovel/core/source/chapter.dart';



class ChapterPage extends StatefulWidget {

  final List<Chapter> chapters;
  final int initialIndex;

  ChapterPage(this.chapters, this.initialIndex);

  _ChapterPageState createState() => _ChapterPageState(this.initialIndex);
}


class _ChapterPageState extends State<ChapterPage> {

  int _index;
  PageController _pageController;
  ScrollController _scrollController;

  _ChapterPageState(this._index);

  @override
  void initState(){
    super.initState();
    _pageController = PageController(initialPage: widget.initialIndex);
    _scrollController = ScrollController();
    _scrollController.addListener(this.swapPageListener);
  }

  @override
  Widget build(BuildContext context){

    return Scaffold(
      appBar: AppBar(title: Text(widget.chapters[this._index].name, style: TextStyle(color: Colors.white),), backgroundColor: Colors.black,),
      body: PageView.builder(
        controller: _pageController,
        scrollDirection: Axis.vertical,
        itemBuilder: (BuildContext context, int index) {
        return FutureBuilder<String>(future: widget.chapters[index].getContent(), builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
          if(snapshot.hasData){
              return this.buildSingleChapterPage(snapshot.data);
          } else if (snapshot.hasError) {
              return Center(child: Text(snapshot.error.toString()));
          } else {
            return Center(child: CircularProgressIndicator());
          }
        });
      }));

  }

  Widget buildSingleChapterPage(String data){
    return SingleChildScrollView(
        child: Html(data: data),
        physics: BouncingScrollPhysics(),
        controller: _scrollController
      );
  }

  void swapPageListener() {
    if (_scrollController.offset > _scrollController.position.maxScrollExtent + 170) {
      if (this._index < widget.chapters.length - 1 ){
        setState(() {
          this._index ++;
          _pageController.jumpToPage(this._index);
        });
      }
   }

   if (_scrollController.offset < _scrollController.position.minScrollExtent - 170) {
      if (this._index > 0){
        setState(() {
          this._index --;
          _pageController.jumpToPage(this._index);
        });
      }
   }
  }
}

感谢您的建议，希望对其他人也有帮助。