flutter入门系列教程＜三＞：tabbar的高度自适用，支持无限滚动 ...

配景

在之前的文章中，简介了tabbar组件的利用，它通常用于顶部放置tabbar标签页头，内容全部都是TabbarView的全部内容，且内容通常是占满屏幕的（尽可能大），如下：

但是偶然候我们需要在文章的中心部分利用tabbar，之前也简介了封装的方法，当时的思绪是给tabbarView限定高度、或者利用expand组件包裹，但这样也不是很灵活。
由于，如果tabbarView下面另有其他组件，那么tabbarView的高度就被限定死了。
那么，能否实现tabbarView无论在哪里，上面下面是否有组件时，其高度都能自适用呢？
自定义tabbar

由于tabbarView组件的特性使然，它必须有固定的高度、或者声明为占据尽可能大的高度，所以如果要让tabbar高度自适用，那就得自己封装，即：不利用tabbarView组件，结果图如下：

自定义tabbar源码

以下仅为示例代码，但足可以应付开发中的大部分需求，仅供参考：

1. import 'package:flutter/material.dart';
3. class CustomTabBarExample extends StatefulWidget {
4.   const CustomTabBarExample({super.key});
6.   @override
7.   State<CustomTabBarExample> createState() => _CustomTabBarExampleState();
8. }
10. class _CustomTabBarExampleState extends State<CustomTabBarExample> {
11.   int _selectedTabIndex = 0;
13.   @override
14.   Widget build(BuildContext context) {
15.     return DefaultTabController(
16.       length: 3, // Tab 的数量
17.       child: Scaffold(
18.         appBar: AppBar(
19.           title: const Text('自适用的tabbar'),
20.         ),
21.         body: SingleChildScrollView(
22.           child: Column(
23.             children: [
24.               // 顶部部分，可自定义内容
25.               Container(
26.                 height: 100,
27.                 color: Colors.blue,
28.                 child: const Center(
29.                   child: Text('Top Section'),
30.                 ),
31.               ),
32.               // TabBar
33.               TabBar(
34.                 onTap: (index) {
35.                   setState(() {
36.                     _selectedTabIndex = index;
37.                   });
38.                 },
39.                 tabs: const [
40.                   Tab(text: 'Tab 1'),
41.                   Tab(text: 'Tab 2'),
42.                   Tab(text: 'Tab 3'),
43.                 ],
44.               ),
45.               // 根据选中的 Tab 索引显示不同的内容
46.               _buildTabContent(_selectedTabIndex),
47.               // 底部部分，可自定义内容
48.               Container(
49.                 height: 100,
50.                 color: Colors.orange,
51.                 child: const Center(
52.                   child: Text('Bottom Section'),
53.                 ),
54.               ),
55.             ],
56.           ),
57.         ),
58.       ),
59.     );
60.   }
62.   Widget _buildTabContent(int index) {
63.     switch (index) {
64.       case 0:
65.         return Container(
66.           height: 70,
67.           color: Colors.red,
68.           child: const Center(
69.             child: Text('Tab 1 Content'),
70.           ),
71.         );
72.       case 1:
73.         return Container(
74.           height: 800,
75.           color: Colors.green,
76.           child: const Center(
77.             child: Text('Tab 2 Content'),
78.           ),
79.         );
80.       case 2:
81.         return Container(
82.           height: 150,
83.           color: Colors.yellow,
84.           child: const Center(
85.             child: Text('Tab 3 Content'),
86.           ),
87.         );
88.       default:
89.         return Container();
90.     }
91.   }
92. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。