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();
    }
  }
}
相关推荐
Jacob02342 分钟前
JavaScript 模块系统二十年:混乱、分裂与出路
前端·javascript
晴殇i29 分钟前
前端内容保护:如何有效防止用户复制页面内容?
前端·javascript·css
bemyrunningdog1 小时前
二进制权限控制方案
javascript·react.js·ecmascript
汪子熙1 小时前
深入探析 header facets:定位与应用
前端·javascript
你听得到111 小时前
从需求到封装:手把手带你打造一个高复用、可定制的Flutter日期选择器
前端·flutter
江城开朗的豌豆1 小时前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js
2401_881244401 小时前
javaweb———html
前端·javascript·html
江城开朗的豌豆1 小时前
玩转Vue Router:这些实用组件让你的SPA如虎添翼!
前端·javascript·vue.js
前端小巷子1 小时前
Web开发中的文件下载
前端·javascript·面试
KaneLogger2 小时前
视频转文字,别再反复拖进度条了
前端·javascript·人工智能