全栈工程师?
嗯.....目前并不是!

小熊爸爸Flutter学习笔记——GetX如何实现底部菜单切换

GetX实现底部菜单切换

学习了Flutter两个月,看过无数大神的视频于文章,发现在状态管理与框架方面GetX的优势在于代码量少,书写逻辑利于我这样的小白用户理解。
目前在自己完成一个独立的项目,笔记将详细记录学习过程中遇到的问题与解决方法。

依赖

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.0

  #GetX
  get: ^3.24.0

  #底部菜单
  custom_navigation_bar: ^0.6.0

底部菜单交互使用了custom_navigation_bar,因为主要是理解GetX实现切换的逻辑,所以用已有的组件实现比较快。

controller

import 'package:get/get.dart';

class ApplicationController extends GetxController {
  ///当前Tap页码
  var selectedIndex = 0.obs;

  // 显示页面对应页码
  void onBottomNavigationBar(int index) {
    selectedIndex.value = index;
  }
}

view

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:newspmbear_app/page/application/application_controller.dart';
import 'package:newspmbear_app/page/find/find_view.dart';
import 'package:newspmbear_app/page/home/home_view.dart';
import 'package:custom_navigation_bar/custom_navigation_bar.dart';
import 'package:newspmbear_app/page/my/my_view.dart';
import 'package:newspmbear_app/page/video/video_view.dart';

class ApplicationPage extends StatelessWidget {
  final ApplicationController applicationController =
      Get.put(ApplicationController());

  //底部菜单
  Widget _buildBottomNavigationBar() {
    return Obx(
      () => CustomNavigationBar(
        iconSize: 28.0,
        selectedColor: Color(0xff040307),
        strokeColor: Color(0x30040307),
        unSelectedColor: Color(0xffacacac),
        backgroundColor: Colors.white,
        items: [
          CustomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text("首页"),
          ),
          CustomNavigationBarItem(
            icon: Icon(Icons.shopping_cart),
            title: Text("视频"),
          ),
          CustomNavigationBarItem(
            icon: Icon(Icons.lightbulb_outline),
            title: Text("发现"),
          ),
          CustomNavigationBarItem(
            icon: Icon(Icons.account_circle),
            title: Text("我的"),
          ),
        ],
        //获取当前按钮数值
        currentIndex: applicationController.selectedIndex.value,
        //切换当前页面
        onTap: applicationController.onBottomNavigationBar,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    ScreenUtil.init(context,
        designSize: Size(375, 812), allowFontScaling: true);
    List<Widget> _getPageView = [
      HomePage(),
      VideoPage(),
      FindPage(),
      MyPage(),
    ];
    return Scaffold(
      // 显示对应的页面
      body: Obx(() =>
          _getPageView.elementAt(applicationController.selectedIndex.value)),
      bottomNavigationBar: _buildBottomNavigationBar(),
    );
  }
}
版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《小熊爸爸Flutter学习笔记——GetX如何实现底部菜单切换》
文章链接:https://www.pmbear.com/%e5%b0%8f%e7%86%8a%e7%88%b8%e7%88%b8flutter%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0-getx%e5%a6%82%e4%bd%95%e5%ae%9e%e7%8e%b0%e5%ba%95%e9%83%a8%e8%8f%9c%e5%8d%95%e5%88%87%e6%8d%a2/
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

大前端WP主题 更专业 更方便

联系我们联系我们