如何像 Flutter 中的专业人士一样创建自定义大小的 TabBar？

Posted 2023-02-23

【中文标题】如何像 Flutter 中的专业人士一样创建自定义大小的 TabBar？

【英文标题】：how to create TabBar with custom size like a pro in Flutter?

【发布时间】：2021-06-28 10:07:54

【问题描述】：

最近我开始创建登录/注册页面。我想使用TabBar 小部件和TabBarWiew 在登录/注册之间进行导航。我想用自定义大小的 tabBar 制作页面，并带有如下指标。屏幕高度的三分之一将是带有图像背景的 tabBars。我怎样才能做到这一点？

已编辑

在@CopsOnRoad 的帮助下，我实现了这样的目标：

完整代码：

import 'package:flutter/material.dart';

class CustomTabWidget extends StatefulWidget 
  @override
  _CustomTabWidget State createState() => _CustomTabWidget State();


class _CustomTabWidget State extends State<CustomTabWidget >
    with SingleTickerProviderStateMixin 
  TabController tabController;
  bool showTab = true;

  @override
  void initState() 
    tabController = TabController(
      length: 2,
      initialIndex: 0,
      vsync: this,
    );
    super.initState();
  

  @override
  void dispose() 
    tabController.dispose();
    super.dispose();
  

  @override
  Widget build(BuildContext context) 
    double width = MediaQuery.of(context).size.width;
    return DefaultTabController(
      length: 2,
      child: showTab
          ? Scaffold(
              appBar: AppBar(
                elevation: 3,
                leading: Container(),
                toolbarHeight: 300,
                flexibleSpace: Image.asset(
                  'assets/images/products/yogurt2.png',
                  fit: BoxFit.cover,
                ),
                bottom: TabBar(
                  controller: tabController,
                  isScrollable: true,
                  indicatorColor: Colors.green,
                  indicatorWeight: 2,
                  labelPadding: EdgeInsets.symmetric(horizontal: width / 6),
                  tabs: [
                    Tab(text: 'Login'),
                    Tab(text: 'Register'),
                  ],
                ),
              ),
              body: TabBarView(controller: tabController, children: [
                Container(
                  child: Center(
                    child: Text('Page1'),
                  ),
                ),
                Container(
                  child: Center(
                    child: Text('Page2'),
                  ),
                ),
              ]),
            )
          : Container(),
    );
    
  

【参考方案1】：

截图：

---

代码：

@override
Widget build(BuildContext context) 
  return DefaultTabController(
    length: 2,
    child: Scaffold(
      appBar: AppBar(
        toolbarHeight: 200,
        flexibleSpace: Image.asset(
          'chocolate_image',
          fit: BoxFit.cover,
        ),
        bottom: TabBar(
          tabs: [
            Tab(text: 'A'),
            Tab(text: 'B'),
          ],
        ),
      ),
    ),
  );

【讨论】：

感谢您的快速回复。顺便问一下，为什么你的截图背景图片没有覆盖你的TabBar 小部件中的标签？

那是因为我没有使用具有background 和title 属性的FlexibleSpaceBar 小部件，并且它们都接受Widget。如果你使用它，它将开始覆盖TabBar 的背景。

【参考方案2】：

您可以通过使用Expanded 小部件包裹您的小部件来实现自定义大小，该小部件将展开以填满所有可用空间，如果您有多个展开的小部件，您可以使用flex 属性来决定每个小部件的大小小部件扩展 you can read more about them here。

图片背景可以查看this question

【讨论】：

感谢您的回复。但这不是我想要达到的目标）