【flutter项目实战】第六节在flutter项目中使用getx创建底部tab如何实现左右页面切换

一 使用PageView实现左右切换

修改lib\app\modules\tabs\\controllers\\tabs_controller.dart

 //增加一个新的变量，默认值为0
 PageController pageController = PageController(initialPage: 0);

修改 lib\app\modules\tabs\\views\\tabs_view.dart

import 'package:flutter/material.dart';

import 'package:get/get.dart';

import '../controllers/tabs_controller.dart';

class TabsView extends GetView<TabsController> {
  const TabsView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Obx(() => Scaffold(
          //删除原先的Body,用PageView包裹
          body: PageView(
            controller: controller.pageController,
            children: controller.pages,
            onPageChanged: (index){
              controller.setCurrentIndex(index);
            },
          ),
          bottomNavigationBar: BottomNavigationBar(
            fixedColor: Colors.red,
            currentIndex: controller.currentIndex.value,
            type: BottomNavigationBarType.fixed,
            onTap: (index) {
              controller.setCurrentIndex(index);
              //增加跳转页面功能，否则底部tab不会切换
              controller.pageController.jumpToPage(index);
            },
            items: const [
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                label: "首页",
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.shopping_cart),
                label: "购物车",
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.people),
                label: "用户",
              ),
            ],
          ),
        ));
  }
}

至此，功能已完成

git地址：git@github.com:winnietherpooh/learn-flutter.git