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'),
          ),
        );
      }
    }
  • 相关阅读:
    Modelsim中观测代码覆盖率
    Allegro中Thermal relief Pad 和Anti Pad
    时序逻辑中阻塞赋值引起的仿真问题
    如何提高FPGA工作频率(转载)
    `include在Verilog中的应用
    forever
    wxpython 应用 使用 google gauth 认证
    sql to sqlalchemy 转换
    django 简易博客开发 5 markdown支持、代码高亮、gravatar头像服务
    simpletodo: 一个简易的 todo 程序 django版
  • 原文地址:https://www.cnblogs.com/ssjf/p/11771752.html
Copyright © 2011-2022 走看看