android+flutter实现tabView主框架展示

用flutter实现首页面tab和对应的tab页面的展示：

 

一、主页面的main.dart代码：

import 'package:flutter/material.dart';
import './DrawerWidget.dart';
import './modal/main_bean.dart';

class MainPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,  // 页面不展示debug标签，设置这一属性即可
      title: 'MainPageHome',
      theme: ThemeData(
        brightness: Brightness.light,
        primaryColor: const Color(0xFF0a3470),
        accentColor: const Color(0xFF0a3470),
      ),
      home: MainWidget(),
    );
  }
}

//页面加载器，作为主页面
class MainWidget extends StatefulWidget {
  //生命周期函数
  @override
  MainPageState  createState() => MainPageState();
}

//主页面（就是类似于activity）   https://blog.csdn.net/yuezheyue123/article/details/83588040
class MainPageState extends State<MainWidget> with SingleTickerProviderStateMixin{
  TabController _tabController; //需要定义一个Controller

  @override
  void initState() {
    super.initState();
    // 创建Controller
    _tabController = new TabController(vsync: this, length: choices.length,initialIndex:0);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        //导航栏
        appBar: new MainAppBar(),
        //抽屉
        drawer: new DrawerWidget(),

        bottomNavigationBar: BottomAppBar(
            color: Colors.white,
            shape: CircularNotchedRectangle(), // 底部导航栏打一个圆形的洞
            child: Container(
              height: 60,
              child:new TabBar(
                isScrollable: false,
                  labelColor: const Color(0xFF0a3470),//选中的tab颜色
                  indicatorWeight: 0.1,//indicator的权重，也就是所占高度
                  indicatorColor: Colors.white,//indicator的颜色默认设置成背景色
                  unselectedLabelColor: const Color(0xFF999999),//未选中的tab颜色
                  tabs: <Widget>[
                    new Tab(icon: new Icon(choices[0].icon),text: choices[0].title,),
                    new Tab(icon: new Icon(choices[1].icon),text: choices[1].title,),
                    //new Tab(icon: new Icon(choices[2].icon,size: 45.0,),),
                    new Tab(icon:new Icon(choices[2].icon,size: 20.0,) ,text:choices[2].title,),
                    new Tab(icon: new Icon(choices[3].icon),text: choices[3].title,),
                    new Tab(icon: new Icon(choices[4].icon),text: choices[4].title,),
                  ],
                controller: _tabController,
              ) ,
            )
        ),

        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButton: FloatingActionButton( //悬浮按钮
            backgroundColor: const Color(0x00000000),
            foregroundColor: const Color(0xffffffff),
            elevation: 0,
            highlightElevation: 0,
            child: Image(
              image: AssetImage("images/center_tab_icon.png"),
              width: 60,
              height: 60,
              alignment: Alignment.topCenter,
            ),
            onPressed:(){
                _tabController.animateTo(2);
            }
        ),

        //主要内容
        body: TabBarView(
            physics: new NeverScrollableScrollPhysics(),
            controller: _tabController,
            children: choices.map<Widget>((Choice choice) {
                return Container(
                    child: choice.widgetPage,
                );
            }).toList(),
        )
    );
  }
}




//导航栏
class MainAppBar extends AppBar{

  //标题
  @override
  Widget get title => Text('主页面');
  @override
  bool get centerTitle => true;

  //右侧图标
  @override
  List<Widget> get actions => <Widget>[
    IconButton(icon: Icon(Icons.share), onPressed: () {}),
  ];

  //左侧图标
  @override
  Widget get leading => Builder(builder: (context) {
    return IconButton(
      icon: Icon(Icons.dashboard, color: Colors.white), //自定义图标
      onPressed: () {
        // 打开抽屉菜单
        Scaffold.of(context).openDrawer();
      },
    );
  });
}

二、使用到的bean类：

import 'package:flutter/material.dart';
import '../TabWidget/MessagePage.dart';
import '../TabWidget/StaticsPage.dart';
import '../TabWidget/QuickMenuPage.dart';
import '../TabWidget/WorkPage.dart';
import '../TabWidget/MinePage.dart';
class Choice {
  const Choice({ this.title, this.icon ,this.widgetPage});
  final String title;
  final IconData icon;
  final StatelessWidget widgetPage;
}

const List<Choice> choices = const <Choice>[
  const Choice(title: '消息', icon: Icons.directions_car,widgetPage: MessagePage(tabInfo: '消息',)),
  const Choice(title: '统计', icon: Icons.directions_bike,widgetPage: StaticsPage(tabInfo: '统计',)),
  const Choice(title: '快捷', icon: Icons.work,widgetPage: QuickMenuPage(tabInfo: '快捷',)),
  const Choice(title: '工作', icon: Icons.directions_boat,widgetPage: WorkPage(tabInfo: '工作',)),
  const Choice(title: '我的', icon: Icons.directions_bus,widgetPage: MinePage(tabInfo: '我的',)),
];

 

demo源码：https://download.csdn.net/download/u010326875/11102116