有没有办法在Flutter中使用PageView实现双面分页?

wgmfuz8q  于 2023-05-08  发布在  Flutter
关注(0)|答案(3)|浏览(131)

我可以向前分页没有问题,但我不能在相反的方向分页。我有周的浏览量,并希望上传用户的滚动

新的一周
有没有人能提供一个链接到源代码,请?

f87krz0w

f87krz0w1#

class MyPageView extends StatefulWidget {
  @override
  _MyPageViewState createState() => _MyPageViewState();
}

class _MyPageViewState extends State<MyPageView> {
  final PageController _controller = PageController(
    viewportFraction: 0.8, // set viewportFraction to 0.8 to show partial pages on the sides
  );

  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: TextDirection.ltr, // change to TextDirection.rtl for right-to-left scrolling
      child: PageView.builder(
        controller: _controller,
        itemBuilder: (BuildContext context, int index) {
          return Container(
            margin: EdgeInsets.symmetric(horizontal: 10.0),
            child: Center(
              child: Text(
                'Page ${index + 1}',
                style: TextStyle(fontSize: 24.0),
              ),
            ),
          );
        },
      ),
    );
  }
}
n8ghc7c1

n8ghc7c12#

您可以将PageController与较大的initialPage一起使用,然后注意itemBuilder中的偏移量

class MyWidget extends StatefulWidget {
  const MyWidget({super.key});

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  late PageController _controller;
  @override
  void initState() {
    super.initState();
    _controller = PageController(initialPage: 1000);
  }

  @override
  void dispose(){
    _controller.dispose();
    super.dispose();
  }

  currentWeek() {
    return DateTime.now().difference(DateTime(DateTime.now().year)).inDays ~/ 7;
  }

  @override
  Widget build(BuildContext context) {
    return PageView.builder(
      controller: _controller,
      itemBuilder: (context, index) {
        return Center(
          child: Container(
            height: 300,
            width: 300,
            color: Colors.purple,
            child: Center(
              child: Text(
                "Week ${currentWeek() + index - 1000}",
                style: const TextStyle(fontSize: 30, color: Colors.white),
              ),
            ),
          ),
        );
      },
    );
  }
}
nwnhqdif

nwnhqdif3#

当使用PageView作为一个小部件时,你有一个名为controller的属性,你可以附加一个控制器,然后使用nextPage()和previousPage()方法将页面分页到任何一面,如下所示:

class _MyPageView extends State<MyPageView> {
  late final PageController pageController;

  @override
  void initState() {
    super.initState();
    pageController = PageController();
  }

  @override
  void dispose() {
    pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return PageView(
      controller: pageController,
    );
  }

  _moveNextPage() {
    pageController.nextPage(duration: const Duration(milliseconds: 200), curve: Curves.linear);
  }

  _movePreviousPage() {
    pageController.previousPage(duration: const Duration(milliseconds: 200), curve: Curves.linear);
  }
}

相关问题