main.dart

import 'package:flutter/material.dart';
import 'package:flutter_xiecheng/navigator/tab_navigator.dart';
​
void main() {
  runApp(const MyApp());
}
​
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: TabNavigator(),
    );
  }
}
​

页面切换PageView实现

PageView({
  Key? key,
  this.scrollDirection = Axis.horizontal,  // pageview滚动的主轴方向
  this.reverse = false,  // 是否和翻书方向一致，false一致，true相反
  PageController? controller,
  this.physics,
  this.pageSnapping = true, // 手势滑动时整页翻动（页面占比）还是任意位置。默认true整页翻动
  this.onPageChanged,  // 当页面改变时的回调
  List<Widget> children = const <Widget>[], // 按照顺序index 0,1,2,3放入页面
  this.dragStartBehavior = DragStartBehavior.start,
  this.allowImplicitScrolling = false,
  this.restorationId,
  this.clipBehavior = Clip.hardEdge,
  this.scrollBehavior,
  this.padEnds = true,
}) : assert(allowImplicitScrolling != null),
     assert(clipBehavior != null),
     controller = controller ?? _defaultPageController,
     childrenDelegate = SliverChildListDelegate(children),
     super(key: key);

PageController设置

PageController({
  this.initialPage = 0, // 默认页
  this.keepPage = true, // 是否切换后销毁。true不销毁， false销毁
  this.viewportFraction = 1.0,  // 占视口的宽度0-1.0之间，不设置默认1.0
}) : assert(initialPage != null),
     assert(keepPage != null),
     assert(viewportFraction != null),
     assert(viewportFraction > 0.0);
​
// 方法：
animateToPage(index) 动画跳转页面
jumpToPage(index)    直接跳转到页面
nextPage()
previousPage()

定义一个controller

final _controller = PageController(
    initialPage: 0,
 );

实例代码

import 'package:flutter/material.dart';
import 'package:flutter_xiecheng/pages/home_page.dart';
import 'package:flutter_xiecheng/pages/my_page.dart';
import 'package:flutter_xiecheng/pages/search_page.dart';
import 'package:flutter_xiecheng/pages/travel_page.dart';
​
class TabNavigator extends StatefulWidget {
  const TabNavigator({Key? key}) : super(key: key);
​
  @override
  State<TabNavigator> createState() => _TabNavigatorState();
}
​
class _TabNavigatorState extends State<TabNavigator> {
  final _defaultColor = Colors.grey;
  final _activeColor = Colors.blue;
  int _currentIndex = 0;
  final _controller = PageController(
    initialPage: 0,
    viewportFraction: 1.0, // 占视口的宽度0-1.0之间，不设置默认1.0
  );
​
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        controller: _controller,
          onPageChanged: (index) {
            setState(() {
              _currentIndex = index;
            });
          },
        children: const [
          HomePage(),
          SearchPage(),
          TravelPage(),
          MyPage(),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          // animateToPage：带动画跳转
          // jumpToPage：直接改变当前页面无动画
          // nextPage：下一页
          // previousPage：上一页
          _controller.animateToPage(index,
              duration: const Duration(milliseconds: 500), curve: Curves.easeInOut);
          setState(() {
            _currentIndex = index;
          });
        },
        // 底部固定
        type: BottomNavigationBarType.fixed,
        selectedItemColor: _activeColor,
        unselectedItemColor: _defaultColor,
        items: const [
          BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: '首页',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: '搜索',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.camera_alt),
            label: '旅拍',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.account_circle),
            label: '我的',
          )
        ],
      ),
    );
  }
}

\