Question

在我的应用中，我有一个PageView，每个页面都包含一本书的页面。自然地，所有页面都大于视口，因此我在每个页面内部使用了SingleChildScrollView，因此可以滚动页面的内容。问题是，当我到达页面底部时，我无法滚动到PageView的下一页（它将尝试继续滚动页面本身而不是页面视图）。有没有一种方法可以让我的应用在到达页面垂直边框时滚动页面？（顶部和底部边框）。

这是我的代码

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

谢谢您的建议，希望对您也有帮助。

Answer 2

尝试使用flutter_easyrefresh，通过控制器在onRefresh（上一页）和onLoad（下一页）中实现网页浏览跳转。

在PageView中使用SingleChildScrollView

2 个答案: