Flutter开发(十七)：Flutter首页导航的框架

首页框架搭建，类似于上一节的，底部导航，不过是规范了写法，效果图如下：

首先创建了五个 dart 文件：tab_navigator.dart (总页面) 、home_page.dart (首页) 、my_page.dart (我的) 、search_page.dart (搜索)和 travel_page.dart(发现)。项目结构如下图：

tab_navigator.dart 的代码：

import 'package:flutter/material.dart';
import 'package:flutter_trip/pages/home_page.dart';
import 'package:flutter_trip/pages/my_page.dart';
import 'package:flutter_trip/pages/search_page.dart';
import 'package:flutter_trip/pages/travel_page.dart';class TabNavigator extends StatefulWidget {@override_TabNavigatorState createState() {return _TabNavigatorState();}
}class _TabNavigatorState extends State<TabNavigator> {final _defaultColor = Colors.grey; //未选中final _activeColor = Colors.blue; //选中int _currentIndex = 0; //默认选中第一个final PageController _controller = PageController(initialPage: 0, //默认显示第0个tab);@overrideWidget build(BuildContext context) {return Scaffold(body: PageView(controller: _controller,children: <Widget>[HomePage(),SearchPage(),TravelPage(),MyPage(),],),bottomNavigationBar: BottomNavigationBar(//默认显示第几个页面currentIndex: _currentIndex,onTap: (index) {//点击跳转指定页面_controller.jumpToPage(index);//改变当前页面setState(() {_currentIndex = index;});},//fixed永远显示底部lab(文字)，shifting只有被选中才会显示底部文字type: BottomNavigationBarType.fixed,items: [BottomNavigationBarItem(//设置默认图标和颜色icon: Icon(Icons.home,color: _defaultColor,),//设置选中图标和颜色activeIcon: Icon(Icons.home,color: _activeColor,),title: Text('首页',style: TextStyle(color: _currentIndex != 0 ? _defaultColor : _activeColor,),)),BottomNavigationBarItem(icon: Icon(Icons.search,color: _defaultColor,),activeIcon: Icon(Icons.search,color: _activeColor,),title: Text('搜索',style: TextStyle(color: _currentIndex != 1 ? _defaultColor : _activeColor,)),),BottomNavigationBarItem(icon: Icon(Icons.camera_alt,color: _defaultColor,),activeIcon: Icon(Icons.camera_alt,color: _activeColor,),title: Text('发现',style: TextStyle(color: _currentIndex != 2 ? _defaultColor : _activeColor,)),),BottomNavigationBarItem(icon: Icon(Icons.account_circle,color: _defaultColor,),activeIcon: Icon(Icons.account_circle,color: _activeColor,),title: Text('我的',style: TextStyle(color: _currentIndex != 3 ? _defaultColor : _activeColor,)),)],),);}
}

home_page.dart 的代码：

import 'package:flutter/material.dart';class HomePage extends StatefulWidget {@override_HomePageState createState() {return _HomePageState();}
}class _HomePageState extends State<HomePage> {@overrideWidget build(BuildContext context) {return Scaffold(body: Center(child: Text('首页'),),);}
}

my_page.dart 的代码：

import 'package:flutter/material.dart';class MyPage extends StatefulWidget {@override_MyPageState createState() {return _MyPageState();}
}class _MyPageState extends State<MyPage> {@overrideWidget build(BuildContext context) {return Scaffold(body: Center(child: Text('我的'),),);}
}

search_page.dart 的代码：

import 'package:flutter/material.dart';class SearchPage extends StatefulWidget {@override_SearchPageState createState() {return _SearchPageState();}
}class _SearchPageState extends State<SearchPage> {@overrideWidget build(BuildContext context) {return Scaffold(body: Center(child: Text('搜索'),),);}
}

travel_page.dart 的代码：

import 'package:flutter/material.dart';class TravelPage extends StatefulWidget {@override_TravelPageState createState() {return _TravelPageState();}
}class _TravelPageState extends State<TravelPage> {@overrideWidget build(BuildContext context) {return Scaffold(body: Center(child: Text('发现'),),);}
}

main.dart 的代码：

import 'package:flutter/material.dart';
import 'package:flutter_trip/navigator/tab_navigator.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: TabNavigator(),);}
}

Flutter开发(十七)：Flutter首页导航的框架相关推荐

flutter开发实战-flutter二维码条形码扫一扫功能实现
flutter开发实战-flutter二维码条形码扫一扫功能实现 flutter开发实战-flutter二维码扫一扫功能实现,要使用到摄像头的原生的功能,使用的是插件:scan 效果图如下一.扫一扫 ...
网页开发——淘宝首页导航
这篇博文主要是重新学习(复习)前端知识,通过写淘宝购物首页导航为案例. html主要书写内容: 1.首先我写了一个大盒子,用于存放所用的全部标签 <div class="nav&quo ...
Flutter开发日记——Flutter动画Motion Widget详解（下）
本篇文章已授权微信公众号 YYGeeker 独家发布转载请标明出处 AnimatedDefaultTextStyle 1.简介 AnimatedDefaultTextStyle控件表示一个具有变化文本 ...
【Flutter开发环境搭建】二、Android SDK、Dart SDK及Flutter SDK安装
一.Android Studio下载安装 Android Studio下载:Download Android Studio and SDK tools | Android Developers 下 ...
Deepin Linux上的Android+Flutter开发环境配置
Deepin Linux上的Android+Flutter开发环境配置在Linux上安装Flutter开发环境,官方教程参见Flutter Get Started,中国用户被墙需额外注意的官方教程参 ...
Flutter开发实战高仿微信（一）首页
Flutter开发实战高仿微信(一)首页 Flutter开发实战高仿微信(一)首页 flutter 开发微信项目 (一) 1. 开发HomePage页 2. 用到的知识点讲解 2.1 Bottom ...
Flutter开发实战高仿微信（二）发现页
Flutter开发实战高仿微信(二)发现页 Flutter开发实战高仿微信(二)发现页 1.1 微信发现页面简述 1.2 APP框架优化 1.2.1 配置APP Logo和启动图片 1.2.2 配 ...
Flutter开发之《闲鱼的探索与收获》笔记（51)
本篇内容是根据闲鱼的匠修,本名叫熊华丽的做的演讲内容做的笔记.本文的内容只是认为自己需要学习的地方. 演讲实录--Flutter-闲鱼的探索与收获 Flutter基本知识 (PPT图示)左边是Flut ...
Flutter开发之官网的第一个例子实现（46)
参考: 编写您的第一个 Flutter App Flutter开发我的收藏列表准备数据:列表数据使用数组存储,选中的数据可以使用Set存储(因为set可以自动去重). 界面列表:使用ListView ...

Flutter开发(十七)：Flutter首页导航的框架

Flutter开发(十七)：Flutter首页导航的框架相关推荐

最新文章

热门文章