要实现一个底栏有哪些解决方案呢？

我们需要：AppBar(TabBar) 或者是更为标准的 bottomNavigationBar

先来介绍第一种吧

AppBar版

先开一个main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      //这里我在自定义主题，可以选择性的复制
      theme: ThemeData(
        brightness: Brightness.light,
        primaryColor: Colors.purple,
        primarySwatch: Colors.purple,
        bottomNavigationBarTheme: BottomNavigationBarThemeData(
          selectedItemColor: Colors.purple,
        ),
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        primarySwatch: Colors.deepPurple,
        //这里定义bottomNavigationBar的主题是因为bug导致bottomNavigationBar不能自适应
        bottomNavigationBarTheme: BottomNavigationBarThemeData(
          selectedItemColor: Colors.deepPurple,
        ),
      ),
      home: HomeViewStatefulWidget(),
    );
  }
}

class HomeViewStatefulWidget extends StatefulWidget {
  HomeViewStatefulWidget({Key key}) : super(key: key);
  @override
  _HomeViewStatefulWidget createState() => _HomeViewStatefulWidget();
}

好了，准备工作已经到位了，现在在上面那段代码之后上创建一个类开始实现效果

class _HomeViewStatefulWidget extends State<HomeViewStatefulWidget>
    with TickerProviderStateMixin, SingleTickerProviderStateMixin {
//这里说明下，继承这两个类可以在切换页面时保证页面不被释放
  static const String _title = 'va1ueCMD';
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
        length: 3,
        child: MaterialApp(
          title: _title,
          theme: ThemeData(
              brightness: Brightness.light, primaryColor: Colors.purple),
          darkTheme: ThemeData(
            brightness: Brightness.dark,
            primaryColor: Colors.deepPurple,
          ),
          home: Scaffold(
              appBar: AppBar(
                title: Text(_title),
              ),
              bottomNavigationBar: Material(
                color: Colors.purple,
                child: TabBar(
                  tabs: <Tab>[
                    Tab(icon: Icon(Icons.house), text: ('社区')),
                    Tab(icon: Icon(Icons.laptop), text: ('数据')),
                    Tab(icon: Icon(Icons.people), text: ('用户')),
                  ],
                ),
              ),
              body: TabBarView(
                children: [BBSIndex(), DataIndex(), UserIndex()],
                //这三个页面从其他的文件中import进来
              )),
        ));
  }
}

好了，appbar实现就介绍到这里

bottomNavigationBar版

在准备工作之后添加

class _HomeViewStatefulWidget extends State<StatefulWidget>
    with AutomaticKeepAliveClientMixin {
  int _selectedIndex = 0;
  String nowInItem = "${_title}-社区";
  //页面控制初始化
  PageController _pageController = PageController(
    initialPage: 0,
    keepPage: true,
  );
  @override
  //保活
  bool get wantKeepAlive => true;
  Widget build(BuildContext context) {
    // TODO: implement build
    List<Widget> _widgets = _buildWidgetOptions();
    return Scaffold(
      body: PageView(
        controller: _pageController,
        children: _widgets,
        //滑动切换页面开关
        physics: NeverScrollableScrollPhysics(),
        //同步页面状态
        onPageChanged: (index) {
          setState(() {
            this._selectedIndex = index;
          });
        },
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.house), title: Text("社区")),
          BottomNavigationBarItem(
              icon: Icon(Icons.data_usage), title: Text("数据")),
          BottomNavigationBarItem(icon: Icon(Icons.people), title: Text("我的")),
        ],
        type: BottomNavigationBarType.fixed,
        currentIndex: _selectedIndex,
        onTap: (int index) {
          setState(() {
            this._selectedIndex = index;
          });
          //切换页面
          _pageController.animateToPage(
            index,
            curve: Curves.easeOutExpo,
            duration: Duration(seconds: 1),
          );
        },
      ),
    );
  }

  //bool get wantKeepAlive => true;
  //主页界面数组
  List<Widget> _buildWidgetOptions() {
    List<Widget> _widgetOptions = <Widget>[
      BBSIndex(),
      DataIndex(),
      UserIndex(),
    ];
    return _widgetOptions;
  }
}

我也不管你看不看得懂，反正我主要是留档记录一下经验

笑（