flutter入门系列教程<三>:tabbar的高度自适用,支持无限滚动

背景

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

但是有时候我们需要在文章的中间部分使用tabbar,之前也简介了封装的方法,当时的思路是给tabbarView限制高度、或者使用expand组件包裹,但这样也不是很灵活。

因为,如果tabbarView下面还有其他组件,那么tabbarView的高度就被限制死了。

那么,能否实现tabbarView无论在哪里,上面下面是否有组件时,其高度都能自适用呢?

自定义tabbar

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

自定义tabbar源码

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

dart 复制代码
import 'package:flutter/material.dart';

class CustomTabBarExample extends StatefulWidget {
  const CustomTabBarExample({super.key});

  @override
  State<CustomTabBarExample> createState() => _CustomTabBarExampleState();
}

class _CustomTabBarExampleState extends State<CustomTabBarExample> {
  int _selectedTabIndex = 0;

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3, // Tab 的数量
      child: Scaffold(
        appBar: AppBar(
          title: const Text('自适用的tabbar'),
        ),
        body: SingleChildScrollView(
          child: Column(
            children: [
              // 顶部部分,可自定义内容
              Container(
                height: 100,
                color: Colors.blue,
                child: const Center(
                  child: Text('Top Section'),
                ),
              ),
              // TabBar
              TabBar(
                onTap: (index) {
                  setState(() {
                    _selectedTabIndex = index;
                  });
                },
                tabs: const [
                  Tab(text: 'Tab 1'),
                  Tab(text: 'Tab 2'),
                  Tab(text: 'Tab 3'),
                ],
              ),
              // 根据选中的 Tab 索引显示不同的内容
              _buildTabContent(_selectedTabIndex),
              // 底部部分,可自定义内容
              Container(
                height: 100,
                color: Colors.orange,
                child: const Center(
                  child: Text('Bottom Section'),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildTabContent(int index) {
    switch (index) {
      case 0:
        return Container(
          height: 70,
          color: Colors.red,
          child: const Center(
            child: Text('Tab 1 Content'),
          ),
        );
      case 1:
        return Container(
          height: 800,
          color: Colors.green,
          child: const Center(
            child: Text('Tab 2 Content'),
          ),
        );
      case 2:
        return Container(
          height: 150,
          color: Colors.yellow,
          child: const Center(
            child: Text('Tab 3 Content'),
          ),
        );
      default:
        return Container();
    }
  }
}
相关推荐
森之鸟2 小时前
Mac电脑上如何打印出字体图标
前端·javascript·macos
mCell2 小时前
GSAP 入门指南
前端·javascript·动效
gnip3 小时前
组件循环引用依赖问题处理
前端·javascript
tangweiguo030519874 小时前
Flutter 数据存储的四种核心方式 · 从 SharedPreferences 到 SQLite:Flutter 数据持久化终极整理
flutter
Aotman_4 小时前
el-input textarea 禁止输入中文字符,@input特殊字符实时替换,光标位置保持不变
前端·javascript·vue.js·前端框架·es6
EveryPossible4 小时前
选择数据展示
javascript
0wioiw04 小时前
Flutter基础(②④事件回调与交互处理)
flutter
肥肥呀呀呀4 小时前
flutter配置Android gradle kts 8.0 的打包名称
android·flutter
百思可瑞教育5 小时前
在Vue项目中Axios发起请求时的小知识
前端·javascript·vue.js·北京百思教育
患得患失9495 小时前
【个人项目】【前端实用工具】OpenAPI to TypeScript 转换器
前端·javascript·typescript