效果见上图:(主要是底部的切换实现)
import 'package:flutter/material.dart';
import 'file:///D:/henanproject/flutter_weight_ui/lib/home/home_tab_page.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,//去掉debug标签
theme: ThemeData(
primarySwatch: Colors.blue,//主题颜色
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: HomeTabPage(),
);
}
}
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_weight_ui/list/article_list_page.dart';
import 'file:///D:/henanproject/flutter_weight_ui/lib/home/banner_page.dart';
import 'package:flutter_weight_ui/setting_page.dart';
import 'package:flutter_weight_ui/tab/top_tab_page.dart';
class HomeTabPage extends StatefulWidget{
@override
State<StatefulWidget> createState() => _homeTabPage();
}
// ignore: camel_case_types
class _homeTabPage extends State<HomeTabPage>{
final List<BottomNavigationBarItem> list = [
BottomNavigationBarItem(
backgroundColor: Colors.blue,
icon: Icon(Icons.home),
label: "首页",
),
BottomNavigationBarItem(
backgroundColor: Colors.blue,
icon: Icon(Icons.account_circle),
label: "文章",
),
BottomNavigationBarItem(
backgroundColor: Colors.blue,
icon: Icon(Icons.security),
label: "分类",
),
BottomNavigationBarItem(
backgroundColor: Colors.blue,
icon: Icon(Icons.mail),
label: "消息",
),
BottomNavigationBarItem(
backgroundColor: Colors.blue,
icon: Icon(Icons.menu),
label: "我的",
),
];
int current;
// 这块可以自己随便写几个page 比如Text("文章")
final pages = [BannerPage(),ArticlePage(),TabTopPage(),SettingPage(),SettingPage()];
@override
void initState() {
super.initState();
current =0;//初始化默认展示的page
}
@override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: BottomNavigationBar(
items: list,//item数组
currentIndex: current,//当前选中的
type: BottomNavigationBarType.fixed,//shifting模式目前我是接受不了,传统的用fixed
onTap: (index) {
_changPage(index);//动态改变选中的tab
},
),
body: pages[current],//选中的page
);
}
void _changPage(int index){
if(index!=current){
setState(() {//实时改变选中的index,跟微信小程序的setData类似
current =index;
});
}
}
}
flutter写这种导航的tab还是挺简单的,比原生简单。