zoukankan      html  css  js  c++  java
  • Flutter-底部導航欄切換

    程序入口

    import 'package:flutter/material.dart';
    import 'botton_navigation_widget.dart';
    
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'demo',
          theme:ThemeData.light(),
          home: BottomNavigationWidget()//導航Widget
        );
      }
    }

    導航widget

    import 'package:flutter/material.dart';
    import 'index.dart';
    import 'campus_network.dart';
    import 'curriculum.dart';
    import 'personal_center.dart';
    
    class BottomNavigationWidget extends StatefulWidget {
      @override
      _BottomNavigationWidgetState createState() => _BottomNavigationWidgetState();
    }
    
    class _BottomNavigationWidgetState extends State<BottomNavigationWidget> {
      final _BottomNavigationColor = Colors.blue;
      //現在的索引
      int _currentIndex = 0;
      //widget集合
      List<Widget> list = List();
      //重寫初始化方法,將需要導航的widget添加到集合
      @override
      void initState() {
        list
          //..相當於list.
          ..add(IndexScreen())
          ..add(CurriculumScreen())
          ..add(CampusNetworkScreen())
          ..add(PersonalCenterScreen());
        super.initState();
      }
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: list[_currentIndex],
          bottomNavigationBar: BottomNavigationBar(
            //超過3個不顯示名字,需要設置
            type: BottomNavigationBarType.fixed,
            items: [
              BottomNavigationBarItem(
                icon: Icon(
                  Icons.crop_3_2,
                  color:_BottomNavigationColor,
                ),
                title: Text(
                  '首頁'
                ),
              ),
              BottomNavigationBarItem(
                icon: Icon(
                  Icons.crop_3_2,
                  color:_BottomNavigationColor,
                ),
                title: Text(
                    '課程'
                ),
              ),
              BottomNavigationBarItem(
                icon: Icon(
                  Icons.crop_3_2,
                  color:_BottomNavigationColor,
                ),
                title: Text(
                    '分校網絡'
                ),
              ),
              BottomNavigationBarItem(
                icon: Icon(
                  Icons.crop_3_2,
                  color:_BottomNavigationColor,
                ),
                title: Text(
                    '個人中心'
                ),
              ),
            ],
            //高亮顯示
            currentIndex: _currentIndex,
            //點擊導航時更新現在的下標
            onTap: (int index){
              setState(() {
                _currentIndex = index;
              });
            },
          ),
        );
      }
    }

    需要跳轉的widget

    import 'package:flutter/material.dart';
    
    class IndexScreen extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('index'),
          ),
          body: Center(
            child: Text('index'),
          ),
        );
      }
    }
  • 相关阅读:
    MySQL数据库常见面试题
    抽象类与接口
    HashMap与Hashtable的区别
    IDEA破解
    重写equals方法
    MFC编程入门之十七(对话框:文件对话框)
    MFC编程入门之十六(对话框:消息对话框)
    MFC编程入门之十五(对话框:一般属性页对话框的创建及显示)
    MFC编程入门之十三(对话框:属性页对话框及相关类的介绍)
    MFC编程入门之十二(对话框:非模态对话框的创建及显示)
  • 原文地址:https://www.cnblogs.com/ssjf/p/11771752.html
Copyright © 2011-2022 走看看