创建一个底部导航栏,其中包含主页、设置和登录图标(未选中的图标应为绿色,选中的图标应为红色)。一旦你点击图标,你将能够打开一个新页面,其中有图标和文本,在 flutter 中使用 dart 语言在页面主体的中心给出图标的名称。
下面是一个简单的 Flutter 代码,它创建一个带有三个图标(home、settings 和 login)的底部导航栏。当您单击某个图标时,它会打开一个新页面,在页面主体的中心显示 selected 图标的名称。 未选定的图标为绿色,选定的图标为红色。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Bottom Navigation',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _currentIndex = 0;
final List<Widget> _pages = [
IconPage(icon: Icons.home, color: Colors.green),
IconPage(icon: Icons.settings, color: Colors.green),
IconPage(icon: Icons.login, color: Colors.green),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Bottom Navigation Example'),
),
body: _pages[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentIndex,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home, color: Colors.green),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.settings, color: Colors.green),
label: 'Settings',
),
BottomNavigationBarItem(
icon: Icon(Icons.login, color: Colors.green),
label: 'Login',
),
],
onTap: (index) {
setState(() {
_currentIndex = index;
});
},
),
);
}
}
class IconPage extends StatelessWidget {
final IconData icon;
final Color color;
IconPage({required this.icon, required this.color});
@override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
icon,
size: 100.0,
color: color,
),
SizedBox(height: 20.0),
Text(
_getIconName(),
style: TextStyle(fontSize: 24.0),
),
],
),
);
}
String _getIconName() {
if (icon == Icons.home) {
return 'Home';
} else if (icon == Icons.settings) {
return 'Settings';
} else if (icon == Icons.login) {
return 'Login';
}
return '';
}
}