请用Flutter实现一个底部有三个tab,要求每个tab页面上都有一个独立的app bar
时间: 2023-06-15 22:03:23 浏览: 67
好的,下面是实现步骤:
1. 在pubspec.yaml文件中添加需要使用的依赖包:
```yaml
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
```
2. 创建一个StatefulWidget并定义三个Tab页面:
```dart
import 'package:flutter/material.dart';
class TabbedPage extends StatefulWidget {
@override
_TabbedPageState createState() => _TabbedPageState();
}
class _TabbedPageState extends State<TabbedPage> with SingleTickerProviderStateMixin {
TabController _tabController;
@override
void initState() {
super.initState();
_tabController = TabController(length: 3, vsync: this);
}
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Tabbed Page'),
),
body: TabBarView(
controller: _tabController,
children: [
buildFirstTab(),
buildSecondTab(),
buildThirdTab(),
],
),
bottomNavigationBar: buildBottomNavigationBar(),
);
}
Widget buildFirstTab() {
return Scaffold(
appBar: AppBar(
title: Text('First Tab'),
),
body: Center(
child: Text('First Tab Content'),
),
);
}
Widget buildSecondTab() {
return Scaffold(
appBar: AppBar(
title: Text('Second Tab'),
),
body: Center(
child: Text('Second Tab Content'),
),
);
}
Widget buildThirdTab() {
return Scaffold(
appBar: AppBar(
title: Text('Third Tab'),
),
body: Center(
child: Text('Third Tab Content'),
),
);
}
Widget buildBottomNavigationBar() {
return Container(
color: Colors.white,
child: TabBar(
controller: _tabController,
tabs: [
Tab(icon: Icon(Icons.home), text: 'Home'),
Tab(icon: Icon(Icons.search), text: 'Search'),
Tab(icon: Icon(Icons.person), text: 'Profile'),
],
),
);
}
}
```
3. 在主函数中创建TabbedPage并将其作为根页面:
```dart
import 'package:flutter/material.dart';
import 'tabbed_page.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: TabbedPage(),
);
}
}
```
这样就可以实现一个底部有三个tab,并且每个tab页面上都有一个独立的app bar的界面了。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)