Flutter 使用Navigator進行局部跳轉頁面

老孟導讀：Navigator組件使用的頻率不是很高，但在一些場景下很是適用，好比局部表單多頁填寫、底部導航一直存在，每一個tab各自導航場景。

Navigator 是管理路由的控件，一般狀況下直接使用Navigator.of(context)的方法來跳轉頁面，之因此能夠直接使用Navigator.of(context)是由於在WidgetsApp中使用了此控件，應用程序的根控件一般是MaterialApp，MaterialApp包含WidgetsApp，因此能夠直接使用Navigator的相關屬性。

Navigator用法很是簡單，以下：

Navigator(
  initialRoute: '/',
  onGenerateRoute: (RouteSettings settings) {
    WidgetBuilder builder;
    switch (settings.name) {
      case 'home':
        builder = (context) => PageA();
        break;
      case 'user':
        builder = (context) => PageB();
        break;
    }
    return MaterialPageRoute(builder: builder, settings: settings);
  },
)複製代碼

initialRoute表示初始化路由，onGenerateRoute表示根據RouteSettings生成路由。

那麼在什麼狀況下須要使用Navigator？在須要局部頁面跳轉的地方使用Navigator，以下面的場景：

頭條客戶端舉報場景

頭條客戶端每個新聞下面都有一個「叉號」，點擊彈出相關信息，點擊其中的局部，會在當前小窗戶內跳轉到舉報頁面，效果以下：

此場景就是使用Navigator的典型場景，點擊舉報，並非全屏切換頁面，而是僅僅在當前彈出的頁面進行切換。

首頁代碼以下：

@override
Widget build(BuildContext context) {
  return Center(
    child: Container(
      height: 350,
      width: 300,
      child: Navigator(
        initialRoute: '/',
        onGenerateRoute: (RouteSettings settins) {
          WidgetBuilder builder;
          switch (settins.name) {
            case '/':
              builder = (context) => PageC();
              break;
          }
          return MaterialPageRoute(builder: builder);
        },
      ),
    ),
  );
}複製代碼

Navigator的初始化路由爲PageC頁面，PageC頁面代碼以下：

class PageC extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Card(
        child: Column(
          children: <Widget>[
            _buildItem(Icons.clear, '不感興趣', '減小這類內容'),
            Divider(),
            _buildItem(Icons.access_alarm, '舉報', '標題誇張，內容質量差 等',
                showArrow: true, onPress: () {
              Navigator.of(context).push(MaterialPageRoute(builder: (context) {
                return PageD();
              }));
            }),
            Divider(),
            _buildItem(Icons.perm_identity, '拉黑做者：新華網客戶端', ''),
            Divider(),
            _buildItem(Icons.account_circle, '屏蔽', '軍事視頻、駕駛員等'),
          ],
        ),
      ),
    );
  }

  _buildItem(IconData iconData, String title, String content,
      {bool showArrow = false, Function onPress}) {
    return Row(
      children: <Widget>[
        Icon(iconData),
        SizedBox(
          width: 20,
        ),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(
                title,
                style: TextStyle(fontSize: 18),
              ),
              Text(
                content,
                style: TextStyle(
                    color: Colors.black.withOpacity(.5), fontSize: 14),
              )
            ],
          ),
        ),
        !showArrow
            ? Container()
            : IconButton(
                icon: Icon(Icons.arrow_forward_ios),
                iconSize: 16,
                onPressed: onPress,
              ),
      ],
    );
  }
}複製代碼

PageC頁面跳轉到PageD頁面，PageD頁面代碼以下：

class PageD extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      width: 250,
      color: Colors.grey.withOpacity(.5),
      child: Column(
        children: <Widget>[
          Row(
            children: <Widget>[
              IconButton(
                icon: Icon(Icons.arrow_back_ios),
                onPressed: () {
                  Navigator.of(context).pop();
                },
              ),
              Text('返回'),
              SizedBox(
                width: 30,
              ),
              Text('舉報'),
            ],
          ),
        ],
      ),
    );
  }
}複製代碼

最終實現了局部跳轉效果，只在中間區域變化，其餘區域不變。

Tab內跳轉

還有一個典型到應用場景就Tab內跳轉，效果以下：

底部導航一直存在，每一個tab都有本身的導航器。

首頁代碼以下：

class TabMain extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _TabMainState();
}

class _TabMainState extends State<TabMain> {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: _currentIndex,
        children: <Widget>[
          TabNavigator(0),
          TabNavigator(1),
          TabNavigator(2),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        onTap: (int index) {
          setState(() {
            _currentIndex = index;
          });
        },
        currentIndex: _currentIndex,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(title: Text('首頁'), icon: Icon(Icons.home)),
          BottomNavigationBarItem(title: Text('書籍'), icon: Icon(Icons.book)),
          BottomNavigationBarItem(
              title: Text('個人'), icon: Icon(Icons.perm_identity)),
        ],
      ),
    );
  }
}複製代碼

首頁定義了3個tab及切換效果。

定義TabNavigator：

class TabNavigator extends StatelessWidget {
  TabNavigator(this.index);

  final int index;

  @override
  Widget build(BuildContext context) {
    return Navigator(
      initialRoute: '/',
      onGenerateRoute: (RouteSettings settins) {
        WidgetBuilder builder;
        switch (settins.name) {
          case '/':
            builder = (context) => ListPage(index);
            break;
        }
        return MaterialPageRoute(builder: builder);
      },
    );
  }
}複製代碼

列表頁面，此頁面通常爲List頁面，點擊其中一個跳轉到相關詳情頁面，這裏爲了簡便，只放了一個跳轉按鈕：

class ListPage extends StatelessWidget {
  ListPage(this.index);

  final int index;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: RaisedButton(
          child: Text('$index'),
          onPressed: () {
            Navigator.of(context).push(MaterialPageRoute(builder: (context) {
              return DetailPage();
            }));
          },
        ),
      ),
    );
  }
}複製代碼

詳情頁面

class DetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Text('DetailPage'),
      ),
    );
  }
}複製代碼

雖然Navigator控件不是特別經常使用，但在一些場景下很是適用。

交流

老孟Flutter博客地址（近200個控件用法）：laomengit.com

歡迎加入Flutter交流羣（微信：laomengit）、關注公衆號【老孟Flutter】：