ui-app菜单选项栏代码
时间: 2024-01-02 10:02:43 浏览: 116
这里是一个简单的UI-App菜单选项栏代码示例:
```dart
import 'package:flutter/material.dart';
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
int _selectedIndex = 0;
static const List<Widget> _widgetOptions = <Widget>[
Text(
'Home',
style: TextStyle(fontSize: 36, fontWeight: FontWeight.bold),
),
Text(
'Search',
style: TextStyle(fontSize: 36, fontWeight: FontWeight.bold),
),
Text(
'Profile',
style: TextStyle(fontSize: 36, fontWeight: FontWeight.bold),
),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('UI-App Menu Bar'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
label: 'Search',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Profile',
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.blue,
onTap: _onItemTapped,
),
),
);
}
}
```
通过这个示例,你可以创建一个具有三个选项(Home、Search、Profile)的底部导航栏。每个选项对应一个页面,并且你可以在 `onTap` 回调中指定导航到哪个页面。
阅读全文