Flutter?GetPageRoute實現(xiàn)嵌套導航學習

更新時間：2022年08月11日 15:22:46 作者：潛水的魚兒

這篇文章主要為大家介紹了Flutter?GetPageRoute實現(xiàn)嵌套導航的示例學習，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

1. 嵌套導航-GetPageRoute

本文主要介紹在Getx下快速實現(xiàn)一個嵌套導航

嵌套導航顧名思義，我們導航頁面中嵌套一個獨立的路由，效果如下

點擊跳轉(zhuǎn)

代碼如下，也是比較簡單

return Scaffold(
  appBar: AppBar(title: const Text('嵌套導航'),),
  body: Navigator(
      key: Get.nestedKey(1), // create a key by index
      initialRoute: '/',
      onGenerateRoute: (settings) {
        if (settings.name == '/') {
          return GetPageRoute(
            page: () => Scaffold(
              appBar: AppBar(
                title: const Text("首頁"), backgroundColor: Colors.blue
              ),
              body: Center(
                child: ElevatedButton(
                  onPressed: () {
                    Get.toNamed('/second', id:1); // navigate by your nested route by index
                  },
                  child: const Text("跳轉(zhuǎn)下一頁"),
                ),
              ),
            ),
          );
        } else if (settings.name == '/second') {
          return GetPageRoute(
            page: () => Center(
              child: Scaffold(
                appBar: AppBar(
                  title: const Text("第二頁"),backgroundColor: Colors.blue
                ),
                body: const Center(
                    child:  Text("第二頁")
                ),
              ),
            ),
          );
        }
      }
  ),
);

通過Navigator這個widget把我們的路由放入新的導航中，通過onGenerateRoute來區(qū)分頁面的路由跳轉(zhuǎn)，key使用的是Get.nestedKey(1)來區(qū)分具體頁面。GetPageRoute創(chuàng)建路由頁面

2. 自定義拓展

我們也可以添加占位圖，用于存放一些廣告頁

 Column(
  children: [
    Container(
      color: Colors.amberAccent,
      height: 100,
      child: const Center(child: Text('我是輪播圖')),
    ),
    Expanded(
      child: Navigator(））]

這里使用Column進行包裹，Expanded撐開下部分。

3. 使用bottomNavigationBar

class NestedNavigatePage extends StatelessWidget {
  const NestedNavigatePage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    final logic = Get.find<NestedNavigateLogic>();
    final state = Get.find<NestedNavigateLogic>().state;
    return Scaffold(
      appBar: AppBar(title: const Text('嵌套導航'),),
      body: Column(
        children: [
          Container(
            color: Colors.amberAccent,
            height: 100,
            child: const Center(child: Text('我是輪播圖')),
          ),
          Expanded(
            child: Navigator(
                key: Get.nestedKey(1), // create a key by index
                initialRoute: '/home',
                onGenerateRoute: logic.onGenerateRoute,
            ),
          ),
        ],
      ),
      bottomNavigationBar:Obx(() => BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home),label: '首頁'),
          BottomNavigationBarItem(icon: Icon(Icons.list),label: '列表'),
          BottomNavigationBarItem(icon: Icon(Icons.people),label:'我的'),
        ],
        currentIndex: state.selectIndex.value,
        onTap: logic.selectTabBarIndex,
        selectedItemColor: Colors.red,
      )),
    );
  }
}

state 中定義數(shù)據(jù)

class NestedNavigateState {
 var selectIndex = 0.obs;
 List<String> pages = ['/home','/list','/mine'];
  NestedNavigateState() {
    ///Initialize variables
  }
}

logic 中實現(xiàn)邏輯

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'nested_navigate_state.dart';
class NestedNavigateLogic extends GetxController {
  final NestedNavigateState state = NestedNavigateState();
  selectTabBarIndex( int index){
    state.selectIndex.value = index;
    Get.toNamed(state.pages[index],id: 1);
  }
  Route? onGenerateRoute(RouteSettings settings) {
    return GetPageRoute(
      settings: settings,
      page: () => page(settings.name!),
      transition: Transition.leftToRightWithFade,
    );
  }
  Widget page(String title) {
   return Center(
        child: Scaffold(
            // appBar: AppBar(
            //     title:  Text(title), backgroundColor: Colors.blue
            // ),
            body: Center(
                child: Text(title)
            )
        ));
  }
}

點擊通過obx自動響應(yīng)