2017-09-29 161 views
3

在執行persistent bottom bar時,之前的route need to be restored當點擊bottom bar中的按鈕時。如何在顫動中獲取當前的路徑路徑?

當點擊底部的一個按鈕時,它的當前路徑路徑(/a/b/c)被保存,並且先前保存的路線根據按鈕點擊恢復。

從概念上講,用戶會將每個按鈕視爲工作區,並且其狀態永遠不會丟失(包括後退堆棧)。用戶可以安全地從一個工作區切換到另一個工作區

如何在Flutter中獲取當前路徑路徑,當路由爲rewinding to root

回答

2

NavigatorState不公開API以獲取當前路由的路徑,而Route也不公開用於確定路由路徑的API。路線可以是(並且通常是)匿名的。您現在可以使用isCurrent方法找出給定的Route是否位於導航器堆棧的頂部,但這對您的用例來說不是很方便。

我會建議你採取不同的方法來解決這個問題,不要倒退到根目錄。相反,請對BottomNavigationBar的每個窗格使用不同的Navigator小部件。這樣,在切換窗格時不必倒帶堆棧。你可以將你的Navigator小工具包裝在OpacityIgnorePointer小工具中,當它們不應該在不破壞其堆棧的情況下可見時隱藏它們。

app video

import 'package:flutter/material.dart'; 

void main() { 
    runApp(new MyApp()); 
} 

class MyApp extends StatelessWidget { 
    @override 
    Widget build(BuildContext context) { 
    return new MaterialApp(
     home: new MyHomePage(), 
    ); 
    } 
} 

class SecurePage extends StatelessWidget { 
    final int index; 

    SecurePage(this.index); 

    Widget build(BuildContext context) { 
    return new Material(
     color: Colors.amber, 
     child: new InkWell(
     child: new Center(
      child: new Icon(
      Icons.security, 
      color: Colors.white, 
      size: index * 100.0 + 20.0, 
     ), 
     ), 
     onTap:() { 
      Navigator.of(context).push(
      new MaterialPageRoute(
       builder: (BuildContext context) { 
       return new SecurePage(index + 1); 
       }, 
      ), 
     ); 
     }, 
    ), 
    ); 
    } 
} 

class VerifiedPage extends StatelessWidget { 
    final int index; 

    VerifiedPage(this.index); 

    Widget build(BuildContext context) { 
    return new Material(
     color: Colors.green, 
     child: new InkWell(
     child: new Center(
      child: new Icon(
      Icons.verified_user, 
      color: Colors.white, 
      size: index * 100.0 + 20.0, 
     ), 
     ), 
     onTap:() { 
      Navigator.of(context).push(
      new MaterialPageRoute(
       builder: (BuildContext context) { 
       return new VerifiedPage(index + 1); 
       }, 
      ), 
     ); 
     }, 
    ), 
    ); 
    } 
} 

class MyHomePage extends StatefulWidget { 
    @override 
    State createState() => new MyHomePageState(); 
} 

class MyHomePageState extends State<MyHomePage> { 
    int _page = 0; 
    List<Widget> initialWidgets = <Widget>[ 
    new SecurePage(0), 
    new VerifiedPage(0), 
    ]; 

    Widget build(BuildContext context) { 
    return new Scaffold(
     body: new Stack(
     children: new List<Widget>.generate(initialWidgets.length, (int index) { 
      return new IgnorePointer(
      ignoring: index != _page, 
      child: new Opacity(
       opacity: _page == index ? 1.0 : 0.0, 
       child: new Navigator(
       onGenerateRoute: (RouteSettings settings) { 
        return new MaterialPageRoute(
        builder: (_) => initialWidgets[index], 
       ); 
       }, 
      ), 
      ), 
     ); 
     }), 
    ), 
     bottomNavigationBar: new BottomNavigationBar(
     currentIndex: _page, 
     onTap: (int index) { 
      setState(() { 
      _page = index; 
      }); 
     }, 
     items: <BottomNavigationBarItem>[ 
      new BottomNavigationBarItem(
      icon: new Icon(Icons.security), 
      title: new Text('Secure'), 
     ), 
      new BottomNavigationBarItem(
      icon: new Icon(Icons.verified_user), 
      title: new Text('Verified'), 
     ), 
     ], 
    ), 
    ); 
    } 
} 
+0

哇!美化。該解決方案還解決了我遇到的其他狀態問題。 –

+0

事實上,我在擺弄'Stack'和'Opacity',但無法讓它工作。我不知道「Navigator」可以被本地化。 'IgnorePointer'是我無法想象的另一個技巧。結合兩者,內置[Hide-Show Widget](https://stackoverflow.com/questions/44489804/show-hide-widgets-on-flutter-programmatically)將會很好,讓它們可以被發現。 –

+0

這個奇妙的解決方案有[其他問題](https://stackoverflow.com/questions/46500186/flutter-keyboard-issue-when-wrap-under-stack-opacity-scrollable)。 –