Flutter:如何跳至在PageView上动态创建的最后一页

时间:2018-09-25 20:28:44

标签: flutter

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

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

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="Vantaux inegaux maxi vantail 2150 mm $1021.2"/>

任何实施想法?

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

完整代码:

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

      },
    );

2 个答案:

答案 0 :(得分:3)

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
  _pageController.animateToPage(lastIdx);

  // or this to jump to it without animating
  _pageController.jumpToPage(lastIdx);
}

答案 1 :(得分:0)

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

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