import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return TabbarWidget();
}
}
class TabbarWidget extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return TabBarState();
}
}
class TabBarState extends State<TabbarWidget> {
int _selectedIndex = 0;
static const TextStyle optionStyle = TextStyle(fontSize: 30.0,fontWeight: FontWeight.bold);
static const List<Widget> _widgetOption = <Widget>[
Text("Index 0 : Home",style: optionStyle,),
Text("Index 1 : Business",style: optionStyle,),
Text("Index 2 : School",style: optionStyle,),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("TabBar Demo"),
),
body: Center(
child: _widgetOption.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text("Home"),
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
title: Text("Business"),
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
title: Text("School"),
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber,
onTap: _onItemTapped,
),
),
);
}
}
底部导航栏
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- TabBar这个名字相信很多学过一点IOS程序员都知道它是用来干嘛的,但本人也并非擅长开发IOS程序员,只是略懂略...
- xxx耀10上面...底部漏出来了。另外一个项目也是类似弹窗,但是没有这个问题。 然后对比了下这个风格文件,发现是...