如何从嵌套的PageView项返回主PageView?

时间:2018-10-30 09:42:05

标签: dart flutter bottomnavigationview pageviews

我有一个演示Flutter应用程序,并使用PageView和BottomNavigationBar。 我的嵌套PageTwo看起来像这样;

  • 第二页
    • PageTwoAccount     -PageTwoAccountDetails

从PageTwoAccountDetails中,我需要返回到我的PageTwo。在我下面的演示应用程序中,当我执行此操作时,它显示PageTwo图标和名称处于活动状态,但将PageOne显示为视图。看来当我从嵌套的PageView返回时 我的PageView和BottomNavigationBar不再同步。

问题是否正确我不是,但是如何从嵌套的PageView项返回主PageView?

// TODO: HomePage
class MyUserHomePage extends StatefulWidget {
  final int titleIndex;
  final String cUserNo;

  MyUserHomePage(
      {Key key,
      this.titleIndex,
      this.cUserNo})
      : super(key: key);

  @override
  _MyUserHomePageState createState() => new _MyUserHomePageState();
}

class _MyUserHomePageState extends State<MyUserHomePage> {

  PageController _pageController;
  int _page;

  // TODO: 1 - INIT STATE
  @override
  void initState() {
    super.initState();
    this._page = widget.titleIndex;
    _pageController = new PageController();
  }

  // TODO: 2 - NAVIGATION TAPPED ANIMATION
  void navigationTapped(int page) {
    _pageController.animateToPage(page,
        duration: const Duration(milliseconds: 800), curve: Curves.ease);
  }

  // TODO: 3 - ON PAGE CHANGED
  void onPageChanged(int page) {
    if (this.mounted) {
      setState(() {
        this._page = page;
      });
    }
  }

// TODO: 4 - DISPOSE
  @override
  void dispose() {
    super.dispose();
    _pageController.dispose();
    this._page = null;
  }

new Scaffold(
  body: new PageView(
    children: [
      new PageOneSummary(
          index: this._page,
          cUserNo: "${widget.cUserNo}"),
      new PageTwo(
          index: this._page,
          cUserNo: "${widget.cUserNo}"),
    ],
    onPageChanged: onPageChanged,
    controller: _pageController,
  ),
  bottomNavigationBar: new Theme(
    data: Theme.of(context).copyWith(
        // Sets the background color of the 'BottomNavigationBar'
        canvasColor: cDarkGreen,
        // Sets the active color of the 'BottomNavigationBar'
        primaryColor: cGreen,
        // Sets the inactive color of the `BottomNavigationBar`
        textTheme: Theme.of(context)
            .textTheme
            .copyWith(caption: new TextStyle(color: Colors.white))),
    child: new BottomNavigationBar(
      items: [
        new BottomNavigationBarItem(
          icon: new Icon(Icons.account_balance_wallet),
          title: new Text(
            “PageOne”,
            style: new TextStyle(
                color: Colors.white, fontWeight: FontWeight.bold),
          ),
        ),
        new BottomNavigationBarItem(
          icon: new Icon(Icons.credit_card),
          title: new Text(
            “PageTwo”,
            style: new TextStyle(
                color: Colors.white, fontWeight: FontWeight.bold),
          ),
        ),

      ],
      onTap: navigationTapped,
      currentIndex: this._page,
    ),
  ),
)

0 个答案:

没有答案