对底部导航栏添加组件并控制大小
时间: 2023-07-19 19:24:23 浏览: 104
要对底部导航栏添加组件并控制大小,可以使用Flutter中的BottomNavigationBar组件。BottomNavigationBar组件允许你在底部添加多个导航项,并提供了一些属性来控制导航项的大小。
下面是一个简单的例子,演示如何在底部导航栏中添加组件并控制它们的大小:
```dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _selectedIndex = 0;
List<Widget> _widgetOptions = <Widget>[
Text(
'Index 0: Home',
style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
),
Text(
'Index 1: Business',
style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
),
Text(
'Index 2: School',
style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('BottomNavigationBar Demo'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Business',
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'School',
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
);
}
}
```
在这个例子中,我们首先定义了一个包含三个Text组件的列表,作为导航项的内容。然后,我们创建了一个BottomNavigationBar组件,在其中定义了三个BottomNavigationBarItem组件,每个组件对应一个导航项。我们还通过设置selectedItemColor属性来改变选中导航项的颜色。
最后,将BottomNavigationBar组件添加到Scaffold组件的bottomNavigationBar属性中,以显示底部导航栏。
阅读全文