前言
在现代应用开发中，良好的路由管理和用户导航体验至关重要，Flutter 为开发者提供了强大的路由系统和灵活的导航方式。本文将深入介绍 Flutter 中路由和顶部导航的使用方法，包括简单路由、命名路由的设置，以及如何实现返回和返回根路由的功能。此外，我们将详细讲解顶部导航的定义与属性设置，并通过实战案例展示复杂布局、新闻列表及页面制作的思路
路由
简单使用
Navigator.push(context, MaterialPageRoute(builder: (context){ return Successful();}))
命名路由
Navigator.of(context).pushNamed('new_page');
返回
Navigator.pop(context);
返回根路由
Navigator.of(context).pushReplacementNamed("/");
顶部导航
定义
穿件类时 需要在后面 加 with SingleTickerProviderStateMixin late TabController _tabController; super.initState(); // 控制器 _tabController = TabController(length: 5, vsync: this); appBar: PreferredSize() // 这些 都是在 appbar 下面的 // 导航条下 elevation: 4, // 文字下面的宽度 indicatorWeight: 2, // 文字下面的长短 匹配方式 indicatorSize: TabBarIndicatorSize.label, // 不 被 选择 的颜色 unselectedLabelColor: Colors.black, // 指示器的颜色 indicatorColor: Colors.red, // 背景颜色 backgroundColor: Colors.white, tabs: const [ Tab( child: Text("following"), ),] body: TabBarView( controller: _tabController,)
全部属性
borderRadius: BorderRadius.circular(10), boxShadow: [ BoxShadow(color: Colors.black, blurRadius: 10), ], mainAxisSize: MainAxisSize.max, mainAxisSize: MainAxisSize.min, crossAxisAlignment:CrossAxisAlignment:.end 纵轴 Column main 主轴 var a= MediaQuery.of(context).size.width; mainAxisAlignment .end start axis horizon vertical decoration: InputDecoration( hintText: widget.hintLabel ), barrierDismissible: false, // 点击 背景 不消失 默认 为 true
实战
复杂布局思路
一排导航
body: ListView( children: [ Row( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: [ Column( children: [ ClipOval( child: Image.asset( "imgs/laying.jpg", height: 50, width: 50, ), ), Text("hello"), ], ), Column( children: [ ClipOval( child: Image.asset( "imgs/laying.jpg", height: 50, width: 50, ), ), Text("hello"), ], ), ], ) ], ),
新闻列表
body: ListView( children: [ Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ Icon( Icons.settings_applications_sharp, size: 88.0, ), Container( margin: EdgeInsets.only(right: 180), child: Column( children: [ Text("title"), Text("content"), ], ), ), Text("2020-1-1") ], ), ], ),
制作一个页面的思路
先制作 数据源 new 的时候 加 上 顿号就行
（）
//在 vo 里面 创建 数据 源 import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; class ContactVO { late IconData icon; late String name; ContactVO(this.icon, this.name); } List<ContactVO> contactData = [ new ContactVO( Icons.access_time_rounded, "clock", ), new ContactVO( Icons.backspace_outlined, "back", ), new ContactVO( Icons.tag_faces_sharp, "smile", ) ];
在 定义一个组件 模板 用来 放数据
final MessageData message;
里面 放 的值 都为 message 里面的
// 封装 一个 组件 用来 装 数据源 import 'package:flutter/material.dart'; import 'package:flutter03/contacts/contacts_vo.dart'; class ContactItem extends StatelessWidget { final ContactVO item; ContactItem({required this.item}); @override Widget build(BuildContext context) { return Container( height: 52.0, decoration: BoxDecoration( color: Colors.red, border: Border(bottom: BorderSide(width: 1, color: Colors.white)), ), child: ElevatedButton( onPressed: () {}, child: Row( children: [ Icon(item.icon), SizedBox( width: 40, ), Text(item.name), ], ), ), ); } }
之后 整合 使用
import 'dart:js_util'; import 'package:flutter/material.dart'; import 'contacts_item.dart'; import 'contacts_vo.dart'; class ContactPage extends StatefulWidget { const ContactPage({Key? key}) : super(key: key); @override State<ContactPage> createState() => _ContactPageState(); } class _ContactPageState extends State<ContactPage> { @override void initState() { // TODO: implement initState super.initState(); } @override Widget build(BuildContext context) { return Scaffold( body: ListView.builder( itemCount: contactData.length, itemBuilder: (BuildContext context, int index) { return ContactItem( item: contactData[index], ); }), ); } }
父类的widget 给 子widget 传参
import 'package:flutter/material.dart'; class MyApp extends StatefulWidget { const MyApp({Key? key}) : super(key: key); @override State<MyApp> createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { @override Widget build(BuildContext context) { return Scaffold( body: Center( child: test("this is message"), ), ); } } class test extends StatefulWidget { final String message; test(this.message); @override State<test> createState() => _testState(); } class _testState extends State<test> { bool _checkValue=true; @override Widget build(BuildContext context) { return Container( child: Row( children: [ Checkbox(value: _checkValue, onChanged: (v){ this.setState(() { _checkValue= v!; }); }), Text( this.widget.message,) ], ), ); } }
添加依赖
fluttertoast: ^8.2.2 import 'package:fluttertoast/fluttertoast.dart';
