Flutter-使用BottomNavigationBar来实现底部导航栏
发布时间
阅读量：
阅读量
在Flutter中，可以使用BottomNavigationBar widget来实现底部导航栏，以下是一个简单的示例代码：
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
int _currentIndex = 0;
final List<Widget> _children = [
HomePage(),
MessagesPage(),
ProfilePage(),
];
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Bottom Navigation Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
body: _children[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentIndex,
onTap: onTabTapped,
items: [
BottomNavigationBarItem(
icon: new Icon(Icons.home),
title: new Text('Home'),
),
BottomNavigationBarItem(
icon: new Icon(Icons.message),
title: new Text('Messages'),
),
BottomNavigationBarItem(
icon: new Icon(Icons.person),
title: new Text('Profile'),
),
],
),
),
);
}
void onTabTapped(int index) {
setState(() {
_currentIndex = index;
});
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.blue,
child: Center(
child: Text('Home Page', style: TextStyle(fontSize: 32)),
),
);
}
}
class MessagesPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.green,
child: Center(
child: Text('Messages Page', style: TextStyle(fontSize: 32)),
),
);
}
}
class ProfilePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.yellow,
child: Center(
child: Text('Profile Page', style: TextStyle(fontSize: 32)),
),
);
}
}
在这个示例中，定义了一个有3个页面的底部导航栏，分别是"Home"、“Messages"和"Profile”。在MyApp的build方法中，创建了一个Scaffold，它包含一个BottomNavigationBar和一个body，根据当前选中的_currentIndex来显示相应的页面。
在BottomNavigationBar中，设置currentIndex属性，它指定了当前选中的页面，以及items属性，它是一个包含3个BottomNavigationBarItem的列表，每个条目包含一个图标和一个标题。
定义一个onTabTapped方法，当用户点击底部导航栏的某个按钮时，会调用此方法，在此方法中更新_currentIndex的值，然后调用setState方法来重建底部导航栏。
最后，定义3个简单的页面HomePage、MessagesPage和ProfilePage，它们分别显示一个文本，用于表示当前处于哪个页面。
全部评论 (0)
还没有任何评论哟~