zoukankan      html  css  js  c++  java
  • 底部导航栏2

    代码:

    import 'package:flutter/material.dart';
    import 'pages/ariplay_screen.dart';
    import 'pages/email_screen.dart';
    import 'pages/home_screen.dart';
    import 'pages/scanner_screen.dart';
    class BottomNavigationWidget extends StatefulWidget {
    _BottomNavigationWidgetState createState() => _BottomNavigationWidgetState();
    }

    class _BottomNavigationWidgetState extends State<BottomNavigationWidget> {
    final _bottomNavColor = Colors.blue;
    int _currentIndex = 0;
    List<Widget> list = List();
    @override
    void initState(){
    list
    ..add(HomeScreen())
    ..add(ScannerScreen())
    ..add(EmailScreen())
    ..add(AirplayScreen());
    super.initState();
     
    }


    @override
    Widget build(BuildContext context) {
    return Scaffold(
    body: list[_currentIndex],
    bottomNavigationBar: BottomNavigationBar(
    items: [
    BottomNavigationBarItem(
    icon: Icon(
    Icons.home,
    color: _bottomNavColor,
    ),
    title: Text(
    'home',
    style: TextStyle(color: _bottomNavColor),
    )
    ),
    BottomNavigationBarItem(
    icon: Icon(
    Icons.email,
    color: _bottomNavColor,
    ),
    title: Text(
    'Email',
    style: TextStyle(color: _bottomNavColor),
    )
    ),
    BottomNavigationBarItem(
    icon: Icon(
    Icons.airplay,
    color: _bottomNavColor,
    ),
    title: Text(
    'Airplay',
    style: TextStyle(color: _bottomNavColor),
    )
    ),
    BottomNavigationBarItem(
    icon: Icon(
    Icons.scanner,
    color: _bottomNavColor,
    ),
    title: Text(
    'Scnner',
    style: TextStyle(color: _bottomNavColor),
    )
    )
     
    ],
    currentIndex: _currentIndex,
    onTap: (int index){
    setState(() {
    _currentIndex = index;
    });
    },
    ),
    );
    }
    }
     
    每个假页面的代码
    import 'package:flutter/material.dart';
    class AirplayScreen extends StatelessWidget {

    @override
    Widget build(BuildContext context) {
    return Scaffold(
    appBar: AppBar(title: Text('Airplay'),),
    body: Center(
    child: Text('Airplay'),
    ),
    );
    }
    }
    总结:
     

    底部导航栏2

    点击导航栏 变换布局

    Ontap:(int index){

    setState(){

    _xxxx = index;/

    }

    }

    //高亮状态的切换

    currentIndex : _xxxx

  • 相关阅读:
    【转载】ESFramewor使用技巧(2)-- 在插件中使用NHibernate
    【转载】ESFramework介绍之(20)―― 插件自动升级
    [转载]我的架构经验小结(一)-- 常用的架构模型
    [转载]TCP服务器“拒绝服务攻击” 解决方案
    【转载】我的架构经验小结(三)-- 深入三层架构
    【转载】动态加载dll
    CSS3动画之一:Transitions功能
    CSS3中的transform变形
    [转载]插件开发
    【转载】服务器系统自动升级
  • 原文地址:https://www.cnblogs.com/pp-pping/p/12172985.html
Copyright © 2011-2022 走看看