首页 > 其他 > 详细

底部导航栏2

时间:2020-01-09 21:38:10      阅读:82      评论:0      收藏:0      [点我收藏+]

代码:

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

底部导航栏2

原文:https://www.cnblogs.com/pp-pping/p/12172985.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!