日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

Flutter?GetPageRoute實現嵌套導航學習_IOS

作者：潛水的魚兒 ? 更新時間： 2022-10-07 編程語言

1. 嵌套導航-GetPageRoute

本文主要介紹在Getx下快速實現一個嵌套導航

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

點擊跳轉

代碼如下，也是比較簡單

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("跳轉下一頁"),
                ),
              ),
            ),
          );
        } 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來區分頁面的路由跳轉，key使用的是Get.nestedKey(1)來區分具體頁面。GetPageRoute創建路由頁面

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 中定義數據
class NestedNavigateState {
 var selectIndex = 0.obs;
 List<String> pages = ['/home','/list','/mine'];
  NestedNavigateState() {
    ///Initialize variables
  }
}
  • logic 中實現邏輯
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自動響應

4.小結

我們通過GetPageRoute可以進行導航嵌套，方便我們實現一些特定需求。同時我們可以配合bottomNavigationBar實現tabbr效果。 創建平行導航堆棧可能是危險的。

理想的情況是不要使用NestedNavigators，或者盡量少用。如果你的項目需要它，請繼續，但請記住，在內存中保持多個導航堆棧可能不是一個好主意。

原文鏈接：https://juejin.cn/post/7129855583775096845

欄目分類
最近更新