效果展示
项目结构:
main.dart
内容很简单
import 'package:flutter/material.dart';
import 'home/home.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
),
initialRoute: "/",
routes: {
"/": (context) => Home(),
},
);
}
}
Home里面也没有做什么处理 如果项目定型的话 ndexPage就可以改为home使用。
因为home 只做了一层转发
home.dart
import 'package:flutter/material.dart';
import 'IndexPage.dart';
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return IndexPage();
}
}
核心代码来了IndexPage.dart
因为要点击修改页面状态 所以使用了 StatefulWidget
不然没有setStatus方法
import 'package:flutter/material.dart';
import 'package:flutter_xiaochao/home/page/advisory_page.dart';
import 'package:flutter_xiaochao/home/page/expore_page.dart';
import 'package:flutter_xiaochao/home/page/guide_page.dart';
import 'package:flutter_xiaochao/home/page/mime_page.dart';
class IndexPage extends StatefulWidget {
@override
_IndexPageState createState() => _IndexPageState();
}
class _IndexPageState extends State<IndexPage> {
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 = [ExplorePage(), GuidePage(), AdvisoryPage(), MinePage()];
int currentIndex;
@override
void initState() {
currentIndex = 0;
}
void _changeIndexPage(index) {
/*如果点击的导航项不是当前项 切换 */
if (index != currentIndex) {
setState(() {
currentIndex = index;
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: BottomNavigationBar(
items: bottomNavItems,
currentIndex: currentIndex,
type: BottomNavigationBarType.shifting,
showSelectedLabels: true,
showUnselectedLabels: true,
onTap: _changeIndexPage,
),
body: pages[currentIndex],
);
}
}
余下四个就很简单
advisory_page.dart
import 'package:flutter/material.dart';
class AdvisoryPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
alignment: Alignment.center,
child: Text("发现"),
);
}
}
expore_page.dart
import 'package:flutter/material.dart';
class ExplorePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
alignment: Alignment.center,
child: Text("探索"),
);
}
}
guide_page.dart
import 'package:flutter/material.dart';
class GuidePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
alignment: Alignment.center,
child: Text("向导"),
);
}
}
mime_page.dart
import 'package:flutter/material.dart';
class MinePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
alignment: Alignment.center,
child: Text("我的"),
);
}
}
效果针不戳。。但是设计师小姐姐会告诉你这是啥?
给我 按照UI效果图做。。
可以
修改为:
type: BottomNavigationBarType.fixed,
效果