0

我有一个 PageView 可以处理三个不同长度的数据列表。清单 1 有一项，清单 2 有 2 项，清单 3 有 3 项。这是正在发生的事情。

  1. PageView 使用列表 1 itemCount = 1 和页面 0 构建。
  2. PageView 使用列表 2 itemCount = 2 和页面 0 构建。
  3. PageView 使用列表 3 itemCount = 3 和第 2 页构建。
  4. PageController.jumpToPage(2) 被调用。
  5. 显示第 2 页，然后自动向下滚动到第 1 页。（似乎认为没有第 2 页并在 itemCount 为 2 时滚动回最后一页）

在构建方法中使用 WidgetsBinding.instance.addPostFrameCallback(...) 构建 PageView 后，我尝试调用 jumpToPage(2) ，认为 PageController 正在某处读取旧的 itemCount = 2 值。那没有用。

如何让 jumpToPage(2) 基于新的 PageView itemCount = 3 工作？

这是我的代码。我试图让它尽可能简单。

import 'package:flutter/material.dart';

class HomePage2 extends StatefulWidget {
  @override
  _HomePage2State createState() => _HomePage2State();
}

class _HomePage2State extends State<HomePage2> {
  List<Map<String, dynamic>> following = [
    {'title': 'Page 1 of 1 following', 'color': Colors.purple.value},
  ];
  List<Map<String, dynamic>> suggested = [
    {'title': 'Page 1 of 2 suggested', 'color': Colors.purple.value},
    {'title': 'Page 2 of 2 suggested', 'color': Colors.red.value},
  ];
  List<Map<String, dynamic>> trending = [
    {'title': 'Page 1 of 3 trending', 'color': Colors.purple.value},
    {'title': 'Page 2 of 3 trending', 'color': Colors.red.value},
    {'title': 'Page 3 of 3 trending', 'color': Colors.orange.value},
  ];

  String currentFeed = 'suggested';

  int followingCurrentPosition = 0;
  int suggestedCurrentPosition = 0;
  int trendingCurrentPosition = 0;

  PageController _pageController;

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

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

  @override
  Widget build(BuildContext context) {
    print('build');
    WidgetsBinding.instance.addPostFrameCallback(
        (_) => _pageController.jumpToPage(getCurrentFeedPosition()));
    return Scaffold(
      body: PageView.builder(
        itemCount: getCurrentFeed().length,
        scrollDirection: Axis.vertical,
        controller: _pageController = PageController(viewportFraction: 1),
        itemBuilder: (context, index) {
          print('PageView itemBuilder');
          return Container(
            color: Color(getCurrentFeed()[index]['color']),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Center(
                  child: Text(getCurrentFeed()[index]['title']),
                ),
                Center(
                  child: RaisedButton(
                    onPressed: () => changeCurrentFeed(),
                    child: Text('Change Feed'),
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );
  }

  void changeCurrentFeed() {
    setState(
      () {
        if (currentFeed == 'following') {
          followingCurrentPosition = _pageController.page.floor();
          currentFeed = 'suggested';
        } else if (currentFeed == 'suggested') {
          suggestedCurrentPosition = _pageController.page.floor();
          currentFeed = 'trending';
        } else {
          trendingCurrentPosition = _pageController.page.floor();
          currentFeed = 'following';
        }
      },
    );
  }

  List<Map<String, dynamic>> getCurrentFeed() {
    if (currentFeed == 'following') {
      return following;
    } else if (currentFeed == 'suggested') {
      return suggested;
    } else {
      return trending;
    }
  }

  int getCurrentFeedPosition() {
    if (currentFeed == 'following') {
      return followingCurrentPosition;
    } else if (currentFeed == 'suggested') {
      return suggestedCurrentPosition;
    } else {
      return trendingCurrentPosition;
    }
  }
}
4

1 回答 1

0

此行为似乎是由每次构建多次调用 PageView itemBuilder 引起的。其他人也遇到过这个问题，但我找不到解决方案。我最终为每个列表使用了单独的 PageView，而不是尝试将一个 PageView 与多个列表一起使用。那为我修好了。

于 2020-09-15T15:39:14.620 回答