zoukankan      html  css  js  c++  java
  • Flutter通过底部导航栏实现页面的跳转

    放自己定义的BottomNavigationWidget 这个组件的核心代码

    import 'package:flutter/material.dart';
    import 'pages/home.dart';
    import 'pages/map.dart';
    import 'pages/timer.dart';
    
    void main(){
      runApp(BottomNavigationWidget());
    }
    
    class BottomNavigationWidget extends StatefulWidget {
      @override
      _BottomNavigationWidgetState createState() => _BottomNavigationWidgetState();
    }
    
    class _BottomNavigationWidgetState extends State<BottomNavigationWidget> {
      final _bottomColor = Colors.blue;
      int _currentIdex = 0;  //当前的页面索引
      List<Widget> pagelist = List();
      
      @override
      void initState(){
        pagelist
          ..add(Home())
          ..add(Map())
          ..add(Timer());
        super.initState();
      }
      
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: pagelist[_currentIdex],
          bottomNavigationBar: new BottomNavigationBar(
            items: [
              BottomNavigationBarItem(
                icon: Icon(Icons.home,color: _bottomColor),
                title: Text("首页"),
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.map,color: _bottomColor),
                title: Text("地图")
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.timer,color: _bottomColor),
                title: Text("计时")
              ),
            ],
            currentIndex: _currentIdex,
            onTap: (int index){
              setState(() {
               _currentIdex = index; 
              });
            },
            type: BottomNavigationBarType.fixed,
          )
        );
      }
    }
    

    上一篇博客实现了底部导航的UI效果,但是没有实现跳转功能,那这篇博客写跳转功能的实现。

    1. 首先声明一个用来储存Widget类型的列表组件。
    List <Widget> pagelist = List()
    
    1. 然后重写我们的initState()方法,相当于把页面初始化到一个Widget数组(即上面声明的pagelist)里,
      有了数组就可以通过索引切换不同的页面辽,相当于是对页面进行重新加载(可能理解有错)。里面是用了dart语法中的…add方法,相当于
      pagelist = pagelist.add(Home());
      pagelist = pagelist.add(Map());
      pagelist = pagelist.add(Timer());
      最后使用super调用父类的initState()方法,这样这三个子页面的组件就可以根据组件里的索引得到。
      void initState(){
        pagelist
          ..add(Home())
          ..add(Map())
          ..add(Timer());
        super.initState();
      }
    
    1. 接下来重写build方法,body属性可以通过当前点击对象的index重构页面。
    body: pagelist[_currentIdex]
    
    1. 然后设置底部导航栏组件中的currentIndex属性
    currentIndex: _currentIdex,
    
    1. 处理点击事件(自己也没理解)
    onTap: (int index){
              setState(() {
               _currentIdex = index; 
              });
            },
    
  • 相关阅读:
    【Log历练手册】Spring事务管理不能提交异常
    【网络安全】如何使用OpenSSL工具生成根证书与应用证书
    【网络安全】如何使用OpenSSL工具生成根证书与应用证书
    【JAVA笔记——器】Spring Aop 实现Log日志系统——基本实现
    jdbc连接池配置方法
    用于读/写配置的工具,下面列出了各种配置(从最高优先级到最低优先级)
    文件复制Util写法,可以适用于多种条件
    记录一个工作中遇到的问题,svn拉的项目,pom.xml报错
    layui的js写法,部分代码
    JDBCUtil连接数据库的写法
  • 原文地址:https://www.cnblogs.com/yfc0818/p/11072647.html
Copyright © 2011-2022 走看看