【问题标题】:Flutter: How to jump to last page dynamically created on a PageViewFlutter:如何跳转到在 PageView 上动态创建的最后一页
【发布时间】:2018-09-25 20:28:44
【问题描述】:

我有一个显示页面列表的 pageView。

应用程序提供了一个 + 按钮以在集合末尾添加一个新页面。

成功创建新页面后,我需要 pageView 自动跳转到最后一页。

如果我尝试重新显示提供提供程序的视图,并将 initialPosition 设置为最后一个 pageView 索引,它不起作用

PageController(initialPage: 0, keepPage: false);

有什么实现思路吗?

  • 使用监听器(但哪个监听器?)

完整代码:

  @override
  Widget build(BuildContext context) {
    if (_userId == null) {
      return Scaffold(body: Center(child: Text("Loading experiences")));
    }
    print('Rebuilding entire view.');
    return Scaffold(
      appBar: new AppBar(
          title: StreamBuilder<ExperiencesInfo>(
              stream: _experiencesInfoStream,
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  _selectedExperience = snapshot.data.currentExperience;
                  return Text(snapshot.data.currentExperience.name);
                } else {
                  return Center();
                }
              }),
          ),
      body: new Container(
        padding: new EdgeInsets.only(
          top: 16.0,
        ),
        decoration: new BoxDecoration(color: Colors.yellow),
        child: Column(
          children: <Widget>[
            Expanded(
                child:
                StreamBuilder<List<Experience>>(
                    stream: _userExperiencesStream,
                    builder: (context, snapshot) {
                      if (snapshot.hasData) {
                        return  _createExperiencesPagesWidget(snapshot.data);
                      } else {
                        return Center();
                      }
                    })
            ),
            _buildPageIndicator(),
            Padding(
              padding: EdgeInsets.only(bottom: 20.0),
            )
          ],
        ),
      ),
      floatingActionButton: new FloatingActionButton(
          child: new Icon(Icons.add),
          onPressed: () {
            _displayAddMenu();
          }),
    );
  }



_createExperiencesPagesWidget(List<Experience> experiences) {
    print('Creating ExperiencesPagesWidget ${experiences}');
    return PageView.builder(
      physics: new AlwaysScrollableScrollPhysics(),
      controller: _pageController,
      itemCount: experiences.length,
      itemBuilder: (BuildContext context, int index) {
        return ConstrainedBox(
            constraints: const BoxConstraints.expand(),
            child: Column(children: <Widget>[
              _buildMoodIndicator(experiences[index]),
              _buildMoodSelector(),
            ]));
      },
      onPageChanged: (index) {
        if (_actionType == ActionType.none) {
          print('page changed to index: ${index}, updating stream.');
          _experiencesViewModel.experienceIndexSink.add(index);
        } else {
          _actionType = ActionType.none;
        }

      },
    );

页面控制器被定义为类属性

PageController _pageController = PageController(initialPage: 0, keepPage: false);

【问题讨论】:

    标签: flutter


    【解决方案1】:

    PageController 包含可用于在页面之间动态切换的方法。

    // Create the page controller in your widget
    PageController _controller = PageController(initialPage: 0, keepPage: false);
    
    
    // Use it in your page view
    @override
    Widget build(BuildContext context) {
      ...
      PageView(controller: _controller, ...);
      ...
    }
    
    
    void onAddButtonTapped() {
      // add the new page
      ...
    
      // use this to animate to the page
      _controller.animateToPage(lastIdx);
    
      // or this to jump to it without animating
      _controller.jumpToPage(lastIdx);
    }
    

    【讨论】:

    • 发送答案。我的 pb 是我不使用“手动操作”(onAddButtonTapped)但是我需要在添加新页面后自动跳转到页面(添加新页面时调用 StreamBuilder 并重建 pageView)
    • 可以在stream listener中调用animateToPage函数吗?
    • 如何将监听器附加到 StreamBuilder 以获知构建布局已完成?
    • 您可以使用 StreamBuilder 发布您的代码吗?很难理解你到底想做什么。
    • _controller.animateToPage(1,duration : Duration(毫秒: 300),curve:Curves.easeIn); ,我们需要给出持续时间和曲线以及 pageNumber
    【解决方案2】:

    我认为这里的问题是如何以编程方式从一个页面移动到在创建小部件后添加的另一个页面。一开始,只有一页。当用户在此页面上正确输入信息时,下一步按钮将变为活动状态并添加另一个页面。用户可以单击下一步,它应该跳转或动画到下一页。但是,如果我尝试将页面真正添加到 PageView 中显示的小部件数组中,则这种方法不起作用。即使实际上有页面,它也只是不显示下一页。我认为这里的问题与控制器在附加到视图时初始化某些东西的事实有关。即使调用了 setState,它也不会重新初始化它。

    所以我针对这种情况的解决方法是在 init.xml 中添加所有必需的页面。即使会有占位符小部件而不是所需的页面。然后我必须以编程方式控制是否允许滑动操作。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2019-05-23
      • 1970-01-01
      • 2020-07-05
      • 2019-08-09
      • 1970-01-01
      • 2020-02-04
      • 2018-12-18
      • 2021-01-01
      相关资源
      最近更新 更多