FLUTTER学习笔记--路由与导航

已于 2023-01-28 17:32:28 修改
阅读量216 收藏 1
点赞数 1
分类专栏： flutter学习笔记 文章标签： flutter 学习 android
于 2023-01-13 00:31:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/VaIOReTto1/article/details/128668509
版权

文章目录

一、匿名路由

1.Navigator

  • push（跳转到指定组件）
    • Navigator.push(
      context, MaterialPageRoute(builder: (context) => 组件名称()) )
  • pop（回退）
    • Navigator.pop（context）

2.代码

class anonyMousDemo extends StatelessWidget {
  const anonyMousDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
                context, MaterialPageRoute(builder: (context) => Product()));
          },
          child: Text('跳转到商品页面'),
        ),
      ),
    );
  }
}

class Product extends StatelessWidget {
  const Product({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("商品页面"),
          leading: Icon(Icons.menu),
          actions: [Icon(Icons.settings)],
          elevation: 10.0,
          centerTitle: true,
        ),
        body: Center(
          child: Center(
            child: ElevatedButton(
              onPressed: () => Navigator.pop(context),
              child: Text('返回'),
            ),
          ),
        ));
  }
}

3.效果

08b1c282-6fc5-41f4-baa3-483779abd86f.gif

二、命名路由

1.声明路由

  • routes路由表（Map类型）
  • initialRoute（初始路由）
  • onUnknownRoute（未知路由-404）

2.跳转到命名路由

  • Navigator.pushNamed（context，‘路由名字’）

3.代码

main() {
  runApp(nameRoute());
}

class nameRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      //home: HomePage(),
      //声明命名路由
      routes: {
        'homePage': (context) => homePage(),
        'product': (context) => product(),
      },
      initialRoute: 'homePage',
      onUnknownRoute: (RouteSettings setting) =>
          MaterialPageRoute(builder: (context) => UnknowPage()),
    );
  }
}

class homePage extends StatelessWidget {
  const homePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("首页"),
          leading: Icon(Icons.menu),
          actions: [Icon(Icons.settings)],
          elevation: 10.0,
          centerTitle: true,
        ),
        body: Center(
          child: Column(
            children: [
              ElevatedButton(
                onPressed: () => Navigator.pushNamed(context, 'product'),
                child: Text('跳转'),
              ),
              ElevatedButton(
                onPressed: () => Navigator.pushNamed(context, 'user'),
                child: Text('未知路由'),
              )
            ],
          ),
        ));
  }
}

class product extends StatelessWidget {
  const product({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("商品页面"),
          leading: Icon(Icons.menu),
          actions: [Icon(Icons.settings)],
          elevation: 10.0,
          centerTitle: true,
        ),
        body: Center(
          child: Center(
            child: ElevatedButton(
              onPressed: () => Navigator.pop(context),
              child: Text('返回'),
            ),
          ),
        ));
  }
}

class UnknowPage extends StatelessWidget {
  const UnknowPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("404"),
          leading: Icon(Icons.menu),
          actions: [Icon(Icons.settings)],
          elevation: 10.0,
          centerTitle: true,
        ),
        body: Center(
          child: Center(
            child: ElevatedButton(
              onPressed: () => Navigator.pop(context),
              child: Text('返回'),
            ),
          ),
        ));
  }
}

4.效果

d2a69eea-d0f5-49e7-9cc7-d57624681ab2.gif

三、动态路由

1.动态路由是指，通过onGeneratedRoute属性指定的路由

2.代码

main() {
  runApp(onGenerateRoute());
}

class onGenerateRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      onGenerateRoute: (RouteSettings setting) {
        //匹配首页 /
        print('当前路径${setting.name}');
        if (setting.name == '/') {
          return MaterialPageRoute(builder: (context) => _homePage());
        }
        if (setting.name == '/product') {
          return MaterialPageRoute(builder: (context) => product());
        }

        //匹配 /product/:id
        var uri = Uri.parse(setting.name.toString());
        print(uri.pathSegments);
        if (uri.pathSegments.length == 2 &&
            uri.pathSegments.first == 'product') {
          var id = uri.pathSegments[1];
          return MaterialPageRoute(builder: (context) => productDetail(id: id));
        }
        return MaterialPageRoute(builder: (context) => UnknowPage());
      },
    );
  }
}

class _homePage extends StatelessWidget {
  const _homePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("首页"),
          leading: Icon(Icons.menu),
          actions: [Icon(Icons.settings)],
          elevation: 10.0,
          centerTitle: true,
        ),
        body: Center(
          child: Column(
            children: [
              ElevatedButton(
                onPressed: () => Navigator.pushNamed(context, '/product'),
                child: Text('跳转'),
              ),
              ElevatedButton(
                onPressed: () => Navigator.pushNamed(context, '/product/1'),
                child: Text('商品1'),
              ),
              ElevatedButton(
                onPressed: () => Navigator.pushNamed(context, '/product/2'),
                child: Text('商品2'),
              ),
              ElevatedButton(
                onPressed: () => Navigator.pushNamed(context, 'user'),
                child: Text('未知路由'),
              )
            ],
          ),
        ));
  }
}

class productDetail extends StatelessWidget {
  final String id;

  const productDetail({Key? key, required this.id}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("商品详情页"),
        leading: Icon(Icons.menu),
        actions: [Icon(Icons.settings)],
        elevation: 10.0,
        centerTitle: true,
      ),
      body: Center(
        child: Column(children: [
          Text('当前商品的id是${this.id}'),
          ElevatedButton(
            onPressed: () => Navigator.pop(context),
            child: Text('返回'),
          )
        ]),
      ),
    );
  }
}

class product extends StatelessWidget {
  const product({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("商品页面"),
          leading: Icon(Icons.menu),
          actions: [Icon(Icons.settings)],
          elevation: 10.0,
          centerTitle: true,
        ),
        body: Center(
          child: Center(
            child: ElevatedButton(
              onPressed: () => Navigator.pop(context),
              child: Text('返回'),
            ),
          ),
        ));
  }
}

class UnknowPage extends StatelessWidget {
  const UnknowPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("404"),
          leading: Icon(Icons.menu),
          actions: [Icon(Icons.settings)],
          elevation: 10.0,
          centerTitle: true,
        ),
        body: Center(
          child: Center(
            child: ElevatedButton(
              onPressed: () => Navigator.pop(context),
              child: Text('返回'),
            ),
          ),
        ));
  }
}

3.效果

7a4baf5f-f3c0-4d07-b60b-58d496710f26.gif

四、匿名路由

1.匿名路由

  • 路由中声明参数
    • Navigator.push
  • 组件中接受参数

2.命名路由

  • 路由中声明参数
    • Navigator.pushNamed(context, routename, {arguments}),
  • 组件中接受参数
    • ModalRoute.of（context）.settings.arguments

3.代码

class arguments extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     debugShowCheckedModeBanner: false,
     routes: {
       'homePage': (context) => homePage_(),
       'product': (context) => _product(),
       'productDetail': (context) => _productDetail(),
     },
     initialRoute: 'homePage',
     onUnknownRoute: (RouteSettings setting) =>
         MaterialPageRoute(builder: (context) => UnknowPage()),
   );
 }
}

class homePage_ extends StatelessWidget {
 const homePage_({super.key});

 @override
 Widget build(BuildContext context) {
   return Scaffold(
       appBar: AppBar(
         title: const Text("首页"),
         leading: Icon(Icons.menu),
         actions: [Icon(Icons.settings)],
         elevation: 10.0,
         centerTitle: true,
       ),
       body: Center(
         child: Column(
           children: [
             ElevatedButton(
               onPressed: () =>
                   Navigator.pushNamed(context, 'product',
                       arguments: {'title': '我是主页传来的参数'}),
               child: Text('跳转到商品页面'),
             ),
             ElevatedButton(
               onPressed: () =>
                   Navigator.pushNamed(context, 'productDetail',
                       arguments: {'id': 1}),
               child: Text('商品1'),
             ),
             ElevatedButton(
               onPressed: () =>
                   Navigator.pushNamed(context, 'productDetail',
                       arguments: {'id': 2}),
               child: Text('商品2'),
             ),
             ElevatedButton(
               onPressed: () => Navigator.pushNamed(context, 'user'),
               child: Text('未知路由'),
             )
           ],
         ),
       ));
 }
}

class _productDetail extends StatelessWidget {
 const _productDetail({Key? key}) : super(key: key);

 @override
 Widget build(BuildContext context) {
   final Map arguments = ModalRoute
       .of(context)
       ?.settings
       .arguments as Map;

   return Scaffold(
     appBar: AppBar(
       title: const Text("商品详情页"),
       leading: Icon(Icons.menu),
       actions: [Icon(Icons.settings)],
       elevation: 10.0,
       centerTitle: true,
     ),
     body: Center(
       child: Column(children: [
         Text('当前商品的id是' + arguments['id'].toString()),
         ElevatedButton(
           onPressed: () => Navigator.pop(context),
           child: Text('返回'),
         )
       ]),
     ),
   );
 }
}

class _product extends StatelessWidget {
 const _product({Key? key}) : super(key: key);

 @override
 Widget build(BuildContext context) {
   final Map arguments = ModalRoute
       .of(context)
       ?.settings
       .arguments as Map;

   return Scaffold(
     appBar: AppBar(
       title: const Text("商品页面"),
       leading: Icon(Icons.menu),
       actions: [Icon(Icons.settings)],
       elevation: 10.0,
       centerTitle: true,
     ),
     body: Center(
       child: Column(
         children: [
           Text('接受的参数是' + arguments['title']),
           ElevatedButton(
             onPressed: () => Navigator.pop(context),
             child: Text('返回'),
           )
         ],
       ),
     ),
   );
 }
}

4.效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xTfzpG18-1673541095447)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2c94c4bd0ae2429a8741af9be2381e8a~tplv-k3u1fbpfcp-watermark.image?)]

五、Drawer导航

1.Scaffold

  • drawer（左侧抽屉菜单）
  • endDrawer（右侧抽屉菜单）

2.UserAccountDrawerHeader

  • 抽屉菜单头部组件

3.AboutListTitle

  • 关于弹窗

4.代码

class drawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Drawer"),
        leading: Icon(Icons.menu),
        actions: [Icon(Icons.settings)],
        elevation: 0.0,
        centerTitle: true,
      ),
      body: homepage(),
      drawer: DrawerList(),
      endDrawer: DrawerList(),
    );
  }
}

class homepage extends StatelessWidget {
  const homepage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Text('Home'),
      ),
    );
  }
}

class DrawerList extends StatelessWidget {
  const DrawerList({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Drawer(
        child: ListView(
          padding: EdgeInsets.all(0),
          children: [
            UserAccountsDrawerHeader(
              accountName: Text('hhh'),
              accountEmail: Text('skd@qq.com'),
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('images/1.png'),
                  fit: BoxFit.cover,
                ),
              ),
              currentAccountPicture: CircleAvatar(
                backgroundImage: AssetImage('images/2.png'),
              ),
            ),
            Divider(
              thickness: 2,
            ),
            ListTile(
              leading: Icon(Icons.settings),
              title: Text('设置'),
              trailing: Icon(Icons.arrow_forward_ios),
            ),
            Divider(
              thickness: 2,
            ),
            ListTile(
              leading: Icon(Icons.account_balance),
              title: Text('余额'),
              trailing: Icon(Icons.arrow_forward_ios),
            ),
            Divider(
              thickness: 2,
            ),
            ListTile(
              leading: Icon(Icons.person),
              title: Text('我的'),
              trailing: Icon(Icons.arrow_forward_ios),
            ),
            Divider(
              thickness: 2,
            ),
            ListTile(
              leading: Icon(Icons.person),
              title: Text('回退'),
              onTap: () => Navigator.pop(context),
              trailing: Icon(Icons.arrow_forward_ios),
            ),
            AboutListTile(
              child: Text('关于'),
              applicationName: '你的应用名称',
              applicationVersion: '1.0.0',
              icon: CircleAvatar(
                child: Text('aaa'),
              ),
              applicationLegalese: '你的应用名称',
              aboutBoxChildren: [
                Text('条例一：'),
                Text('条例一：'),
              ],
              applicationIcon: Image.asset(
                'images/3.jpg',
                width: 50,
                height: 50,
              ),
            )
          ],
        ));
  }
}

5.效果

8b333e57-b3fe-4ae4-a40f-8e1cc23c71e7.gif

六、BottomNavigationBar导航

1.items

  • 包含导航（BottomNavigationBarItem）的列表

2.currentIndex

  • 当前导航索引

3.type

  • 导航类型（BottomNavigationBarType）

4.onTap（）

  • 导航的点击事件（一般会更新导航索引）

5.代码

class bottomNavigatorBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: hOme(),
    );
  }
}

class hOme extends StatefulWidget {
  const hOme({Key? key}) : super(key: key);

  @override
  State<hOme> createState() => _hOmeState();
}

class _hOmeState extends State<hOme> {
  final List<BottomNavigationBarItem> bottomNavItems = [
    BottomNavigationBarItem(
      backgroundColor: Colors.blue,
      icon: Icon(Icons.home),
      label: '首页',
    ),
    BottomNavigationBarItem(
      backgroundColor: Colors.green,
      icon: Icon(Icons.message),
      label: '消息',
    ),
    BottomNavigationBarItem(
      backgroundColor: Colors.amber,
      icon: Icon(Icons.shopping_cart),
      label: '购物车',
    ),
    BottomNavigationBarItem(
      backgroundColor: Colors.red,
      icon: Icon(Icons.person),
      label: '我的',
    ),
  ];

  final pages = [
    Center(
      child: Text('Home', style: TextStyle(fontSize: 50),),
    ),
    Center(
      child: Text('Message', style: TextStyle(fontSize: 50),),
    ),
    Center(
      child: Text('Shopping cart', style: TextStyle(fontSize: 50),),
    ),
    Center(
      child: Text('Profile', style: TextStyle(fontSize: 50),),
    )
  ];

  late int currentIndex;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    currentIndex = 0;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("底部导航"),
        leading: Icon(Icons.menu),
        actions: [Icon(Icons.settings)],
        elevation: 0.0,
        centerTitle: true,
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: bottomNavItems,
        currentIndex: currentIndex,
        //type: BottomNavigationBarType.fixed,
        type: BottomNavigationBarType.shifting,
        onTap: (index) {
          _changePage(index);
        },
      ),
      body: pages[currentIndex],
    );
  }

  void _changePage(int index) {
    if (index != currentIndex) {
      setState(() {
        currentIndex = index;
      });
    }
  }
}

6.效果

3fe461e8-1803-4c64-a05b-a3492afe9b96.gif

七、Tab导航

1.DefaultTabController（整个Tab导航的容器）

  • length（声明导航数量）
  • child（指定子组件）

2.TabBar（导航菜单）

  • tabs（导航菜单数组）

3.TabBarView（导航页面）

  • children（多个导航页面内容）

4.代码

class tabDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: tabhome(),
    );
  }
}

class tabhome extends StatelessWidget {
  //菜单数组
  final List<Widget> _tabs = [
    Tab(text: '首页', icon: Icon(Icons.home)),
    Tab(text: '添加', icon: Icon(Icons.add)),
    Tab(text: '搜索', icon: Icon(Icons.search)),
  ];

  //页面数组
  final List<Widget> _tabViews = [
    Icon(Icons.home, size: 120, color: Colors.red),
    Icon(Icons.add, size: 120, color: Colors.green),
    Icon(Icons.search, size: 120, color: Colors.black),
  ];

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
        length: _tabs.length,
        child: Scaffold(
            appBar: AppBar(
              title: const Text("Tab"),
              leading: Icon(Icons.menu),
              actions: [Icon(Icons.settings)],
              elevation: 10.0,
              centerTitle: true,
              bottom: TabBar(
                tabs: _tabs,
                labelColor: Colors.yellow,
                unselectedLabelColor: Colors.black45,
                indicatorSize: TabBarIndicatorSize.tab,
                indicatorColor: Colors.yellow,
                indicatorWeight: 10,
              ),
            ),
            body:TabBarView(
              children: _tabViews,
            ),
          bottomNavigationBar: TabBar(
            tabs: _tabs,
            labelColor: Colors.blue,
            unselectedLabelColor: Colors.black45,
          ),
        )
    );
  }
}

5.效果

3dadd31c-ade6-45b1-a2c6-ba66bfe16653.gif

VaIOReTto1
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
flutter-embedded-linux:Flutter的嵌入式Linux嵌入式
03-12
目的与目标 我们的目标是在嵌入式系统中使用Flutter。 我们正在开发此嵌入器，以在嵌入式产品中使用Flutter。 最终，我们希望向的主线提出并贡献该软件，这意味着我们希望为所有嵌入式开发人员正式向Flutter添加...
flutter开发实战-常用的路由Route配置
一名开发者
07-10 1368
flutter开发实战-常用的路由Route配置，主要实现配置路由，PageRouteBuilder、MaterialApp中设置onGenerateRoute，最后使用NavigatorRoute.push进行页面跳转，页面传参数。
Flutter学习四：Flutter开发基础（三）路由管理
D_lunar的博客
06-27 1369
语义化更明确。代码更好维护；如果使用匿名路由，则必须在调用的地方创建新路由页，这样不仅需要import新路由页的dart文件，而且这样的代码将会非常分散。可以通过做一些全局的路由跳转前置处理逻辑。路由MaterialApp中还有和可以监听所有路由跳转动作在打开一个不存在的命名路由时会被调用。
FLutter_27_匿名路由
m0_49349981的博客
08-22 200
Route 一个路由时一个屏幕或界面的抽象 Navigator 管理路由的组件。Navigator 可以通过路由入栈和出栈来实现页面之间的跳转 常用属性： initialRoute:初始路由，即默认页面 onGenerateRoute：动态路由(根据规则，匹配动态路由) onUnknowRoute:未知路由,也就是404 routes:路由集合 匿名路由 ​ Navigator push(跳转到指定组件) Navigator.push( context, MaterialPag.
斯坦福Dan Boneh密码学——03 匿名路由
weixin_47695607的博客
10-17 605
斯坦福Dan Boneh密码学——学习笔记3
Flutter入门-路由与导航
知识共享，你我皆是知识的搬运工
10-21 1882
路由与导航之Navigator1.0和Navigator2.0
flutter-master_flutter_flutter-master_
09-29
Flutter 是 Google 开源的 UI 工具包，帮助开发者通过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台。Flutter 开源、免费，拥有宽松的开源协议，适合商业项目。
Flutter知识点-路由导航
06-14
Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的用户界面。本课程以实例的方式带领大家学习企业级路由Fluro的使用方法。
flutter-notes-app:基于Fluttter的笔记应用程序，支持照片笔记！
05-26
它是使用Dart在Google Flutter Framework之上构建的。 Tizeno可以帮助您创建快速笔记，照片笔记等。 可以更改便笺的颜色，将其标记为已加星标或已存档，创建照片便笺并将其保存在本地，并将所有内容存储在SQLite...
Flutter-Chat-App
05-17
Flutter群聊应用 。 遵循 Codelabs。 :)
Flutter之路由配置
moozixiao的博客
05-17 1329
跳转与返回 Navigator.push 方法是向路由堆中添加一个新的路由 MaterialPageRoute的build方法返回一个新的组件并跳转 Navigator.push(context, MaterialPageRoute( builder: (context) => Show() )); Navigator.pop 方法是从路由堆里面拿出最前面的路由 Navigator.pop(context); 路由使用context参数传入 Navigator.of(co
Flutter 路由配置
qq_43603372的博客
06-09 572
//固定写法 var onGenerateRoute = (RouteSettings settings) { // 统一处理 final String name = settings.name; final Function pageContentBuilder = routes[name]; if (pageContentBuilder != null) { if (settings.arguments != null) { final Route route = M
Flutter 路由传参配置
Bloxed_shangyc的博客
11-06 374
Flutter 路由传参配置 在项目目录routers有一个Routers.dart文件（代码如下） import 'package:cai_customer/pages/orderDetail/Detail.dart'; final Map<String, Object> routes = { '/': (context) => TabContainer.Tab(), '/orderDetail': (context, {arguments}) => OrderDet
Flutter之路由系列之Route
菜鸟博客
06-04 1961
Flutter提供了强大的路由管理功能，在这里就来梳理下Route的相关知识点。先来直观的看下Route的家族成员： 1、Route的install逻辑 咱们先来简单分析下Route，下来看看源码： abstract class Route<T> { RouteSettings _settings; NavigatorState _navigator; List<OverlayEntry> get overlayEntries => con
flutter Route路由基本用法
senkai123的博客
11-07 5105
Flutter 命名路由、路由组、路由退出、路由堆栈 在flutter中需要进行页面跳转，也是需要用到路由Route，关键Navigator与Route，Navigator负责单元Route路由，压入和弹出，单元路由也就是我们需要跳转页面 ，比如HomePage（） Navigator关键使用的4个属性 •initialRoute: 初始路由的，也就是进入APP，默认页面 •onGenerateR...
Flutter路由之Navigator详解
watertekhqx的博客
05-28 5930
含义： Navigator 继承自 StatefulWidget，它也是小组件，它有很多相关静态函数，可以帮我们达到页面跳转和数据交互的功能： push 将设置的router信息推送到Navigator上，实现页面跳转。 of 主要是获取 Navigator最近实例的好状态。 pop 导航到新页面，或者返回到上个页面。 canPop 判断是否可以导航到新页面 maybePop 可能会导航到新页面 ...
Flutter框架【3】路由跳转 以及 底部导航栏的实现
gzmhxsn的博客
02-02 514
实现了界面的跳转和底部导航栏与界面的联动切换。
Flutter学习-导航和路由
hn_lgc的专栏
08-17 658
APP由多个页面组成，我们要跳转到不同的页面，如何跳转呢？类似浏览器，通过唯一的标识找到要跳转的页面，把标识放到一个路由映射表，然后进行跳转即可。
Flutter底部导航路由实现
lentolove的博客
11-05 1123
引言 学习Flutter的基础控件的使用。 推荐学习的书籍：《Flutter实战-第二版》 Flutter官方教程 咸鱼技术团队： 1.底部导航实现 要实现这样的效果，我们需要用到以下控件： Scaffold PageView BottomNavigationBar BottomNavigationBarItem PageController 2. Widget属性说明 1.Scaffold 控件 一个完整的路由页可能会包含导航栏、抽屉菜单(Drawer) 以及底部.
best-flutter-ui-templates
最新发布
08-06
通过使用 best-flutter-ui-templates，开发者可以节省大量的时间与精力，避免从零开始设计并实现每个界面。这样，开发者可以更专注于业务逻辑的实现，加快项目的开发进度。 此外，best-flutter-ui-templates 还提供...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值