Flutter Navigator 首页Bottom切换

QQ20200530-181055.gif

Flutter实现首页切换

import 'package:flutter/material.dart';
//自定义TabNavigator
class TabNavigator extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _TabNavigatorState();
  }
}

class _TabNavigatorState extends State<TabNavigator> {
  //默认选中颜色
  final _defaultColor = Colors.grey;
  //选中颜色
  final _activityColor = Colors.green;
  int _currentIndex = 0;
  final PageController _controller = PageController(initialPage: 0);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        //禁止PageView滑动
        physics: NeverScrollableScrollPhysics(),
        //PageView控制器
        controller: _controller,
        children: <Widget>[
          //要显示的页面
          HomePage(),
          SearchPage(),
          TravelPage(),
          MyPage(),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index){
          _controller.jumpToPage(index);
              setState(() {
                _currentIndex=index;
              });
        },
        items: [
          BottomNavigationBarItem(
            //默认图标
              icon: Icon(
                Icons.home,
                color: _defaultColor,
              ),
              //选中图标
              activeIcon: Icon(
                Icons.home,
                color: _activityColor,
              ),
              title: Text(
                '首页',
                style: TextStyle(
                    color: _currentIndex == 0 ? _activityColor : _defaultColor),
              )),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.search,
                color: _defaultColor,
              ),
              activeIcon: Icon(
                Icons.search,
                color: _activityColor,
              ),
              title: Text(
                '搜索',
                style: TextStyle(
                    color: _currentIndex == 1 ? _activityColor : _defaultColor),
              )),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.camera,
                color: _defaultColor,
              ),
              activeIcon: Icon(
                Icons.camera,
                color: _activityColor,
              ),
              title: Text(
                '旅拍',
                style: TextStyle(
                    color: _currentIndex == 2 ? _activityColor : _defaultColor),
              )),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.account_circle,
                color: _defaultColor,
              ),
              activeIcon: Icon(
                Icons.account_circle,
                color: _activityColor,
              ),
              title: Text(
                '我的',
                style: TextStyle(
                    color: _currentIndex == 3 ? _activityColor : _defaultColor),
              ))
        ],
      ),
    );
  }
}

import 'package:flutter/material.dart';

//首页
class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _HomePageState();
  }
}
class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: Center(
        child: Text("首页"),
      ),
    );
  }
}

Demo入口

void main() {
  runApp(new FadeAppTest());
}
class FadeAppTest extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Fade Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: TabNavigator(),
    );
  }
}