Flutter之底部tab切换

 

效果见上图：（主要是底部的切换实现） 

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还是挺简单的，比原生简单。