• flutter 底部导航栏demo code


    main.dart
    
    import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    
    import 'conf/config.dart' as conf;
    import 'views/bottomBarItem.dart';
    
    
    void main() {
      runApp(MaterialApp(
        title: conf.appName,
        theme: ThemeData(
          primarySwatch: Colors.red
        ),
        home: testPage(),
      )
      );
    }
    
    class testPage extends StatefulWidget {
      @override
      _testPageState createState() => _testPageState();
    }
    
    class _testPageState extends State<testPage> {
      int current_index = 0;
    
      _changePage(index){
        if (index != current_index){
          setState(() {
            current_index = index;
          });
        }
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
    
          appBar: AppBar(
            title: Text("test bottom bar item"),
          ),
    
          body: pages[current_index],
    
          bottomNavigationBar: BottomNavigationBar(
            items: bottomNavItems,
            onTap: (index){
              _changePage(index);
            },
            currentIndex: current_index,
            type: BottomNavigationBarType.fixed, // other
    
          ),
        );
      }
    }
    other page (home.msg,userInfo)
    
    import 'package:flutter/material.dart';
    
    
    class homePage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Center(
            child: Column(
              children: [
                Text("home"),
               
              ],
            ),
          ),
        );
      }
    }
    pages 
    
    import 'package:demo4/views/home.dart';
    import 'package:flutter/material.dart';
    
    import 'home.dart';
    import 'msgPage.dart';
    import 'userInfoPage.dart';
    
    // 底部导航栏页面
    final List<BottomNavigationBarItem> bottomNavItems  = [
      BottomNavigationBarItem(
          icon: Icon(Icons.home),
          title: Text("主页")
      ),
      BottomNavigationBarItem(
          icon: Icon(Icons.home),
          title: Text("消息")
      ),
      BottomNavigationBarItem(
          icon: Icon(Icons.home),
          title: Text("个人中心")
      ),
    ];
    
    
    final List<Widget> pages = [homePage(),msgPage(),userInfoPage()];
  • 相关阅读:
    关于Spring的destroy-method和scope="prototype"不能共存问题
    关于引入文件名字问题
    技术学习路
    web.xml文件配置
    性能测试中的TPS与HPS
    设计模式简介
    Cause of 400 Bad Request Errors
    vim使用技巧
    如何更好地利用Pmd、Findbugs和CheckStyle分析结果
    Java基础知识
  • 原文地址:https://www.cnblogs.com/zengxm/p/13168497.html
Copyright © 2020-2023  润新知