Flutter实现Tabbar滑动_flutter tabbarview滑动切换

Flutter是一个跨平台的移动应用开发框架，它提供了丰富的组件和工具，让开发者可以快速地构建美观和高性能的应用。在Flutter中，Tabbar是一个常用的组件，它可以让用户在不同的页面之间切换，提高用户体验。本文将介绍如何使用Flutter实现滑动Tabbar的效果，即用户可以通过滑动屏幕或者点击Tab来切换页面。

要实现滑动Tabbar的效果，我们需要使用以下几个组件：

• TabController：这是一个控制器，它可以管理Tabbar和TabView之间的状态和同步。
• TabBar：这是一个显示Tab的组件，它可以放在AppBar或者其他位置，它可以响应用户的点击事件，并且显示当前选中的Tab。
• Tab：这是一个表示单个Tab的组件，它可以包含文本、图标或者其他自定义内容。
• TabBarView：这是一个显示Tab对应页面的组件，它可以根据TabController的状态来切换页面，并且支持滑动手势。

下面是一个简单的示例代码，它实现了一个有三个Tab的滑动Tabbar，并且修改了Tab的样式和颜色：

import 'package:flutter/material.dart';

class TabbarDemo extends StatefulWidget {
@override
_TabbarDemoState createState() => _TabbarDemoState();
}

class _TabbarDemoState extends State<TabbarDemo>
with SingleTickerProviderStateMixin {
// 创建一个TabController
late TabController _tabController;

@override
void initState() {
super.initState();
// 初始化TabController，并指定初始索引和长度
_tabController = TabController(initialIndex: 0, length: 3, vsync: this);
}

@override
void dispose() {
// 销毁TabController
_tabController.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('滑动Tabbar示例'),
// 使用TabBar组件作为AppBar的底部
bottom: TabBar(
// 绑定控制器
controller: _tabController,
// 定义三个Tab
tabs: [
Tab(text: '首页', icon: Icon(Icons.home, color: Colors.white)),
Tab(text: '消息', icon: Icon(Icons.message, color: Colors.white)),
Tab(text: '我的', icon: Icon(Icons.person, color: Colors.white)),
],
// 修改选中和未选中的颜色
labelColor: Colors.blue,
unselectedLabelColor: Colors.white,
),
),
// 使用TabBarView组件作为页面内容
body: TabBarView(
// 绑定控制器
controller: _tabController,
// 定义三个页面
children: [
Center(child: Text('这是首页')),
Center(child: Text('这是消息')),
Center(child: Text('这是我的')),
],
),
);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60