如何从默认标签栏删除底部答案

【问题标题】：How to remove bottom from default tab bar如何从默认标签栏删除底部
【发布时间】：2020-04-18 21:40:18
【问题描述】：

我需要添加一个没有应用栏的标签栏，我从 StackOverflow 获得了一个使用灵活空间的解决方案，它正在工作，但它在标签栏底部产生了额外的不需要的空间
如何删除或隐藏它？

我的完整代码

import 'package:flutter/material.dart';

class TemplesListingWithTabMode extends StatefulWidget {
  TemplesListingWithTabMode({Key key}) : super(key: key);

  @override
  _TemplesListingWithTabModeState createState() =>
      _TemplesListingWithTabModeState();
}

class _TemplesListingWithTabModeState extends State<TemplesListingWithTabMode> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[

        Container(
          height: MediaQuery.of(context).size.height-kToolbarHeight-kMaterialListPadding.top-kTabLabelPadding.top,
          child: DefaultTabController(
            length: 2,
            child: Scaffold(
              appBar: AppBar(
                backgroundColor: Colors.white,
                flexibleSpace: TabBar(
                    indicatorColor: Colors.pink,
                    tabs: [
                  Tab(
                    child: Text("ALL",style: TextStyle(color: Colors.pink),),
                  ),Tab(
                    child: Text("Favorites",style: TextStyle(color: Colors.pink),),
                  )
                ]),
              ),
              body  : Container(
                color: Colors.grey,
                child: TabBarView(

                    children: [
                      ListView.builder(
                          itemCount: 100,
                          itemBuilder: (context,index){
                        return Container(
                          child: Center(
                            child: Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Text("i am $index"),
                            ),
                          ),
                        );
                      }),
                      ListView.builder(
                          itemCount: 5,
                          itemBuilder: (context,index){
                            return Container(
                              child: Center(
                                child: Padding(
                                  padding: const EdgeInsets.all(8.0),
                                  child: Text("i am $index"),
                                ),
                              ),
                            );
                          })
                ]),
              ),
            ),
          ),
        )
      ],
    );
  }
}

@Darshan 提供的解决方案没有解决我的问题，解决方案是
在 SafeArea 小部件中包装 TabBar。结果是

如何去掉appbar这个小底？

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

将TabBar 包装在SafeArea 小部件中。它为子小部件添加了必要的填充，在您的情况下，可以最大限度地减少您看到的空间。工作代码如下：

child: Scaffold(
              appBar: AppBar(
                backgroundColor: Colors.white,
                flexibleSpace: SafeArea(
                child: TabBar(
                    indicatorColor: Colors.pink,
                    tabs: [
                  Tab(
                    child: Text("ALL",style: TextStyle(color: Colors.pink),),
                  ),Tab(
                    child: Text("Favorites",style: TextStyle(color: Colors.pink),),
                  )
                ]),)
              ),

希望这能回答你的问题。

【讨论】：

如何删除新结果中的小空间（添加SafeArea后）

【解决方案2】：

原因是AppBar 有它的大小 + 状态栏大小。有多种方法可以解决此问题。正如提到的其他答案，简单的方法是添加SafeArea。

请注意，即使您在两个选项卡下获得丑陋的小空间。

为了解决这个问题，你可以使用PreferredSize（也有其他方法）。

上面截图的代码：

class _TemplesListingWithTabModeState extends State<TemplesListingWithTabMode> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: SafeArea(
        child: Scaffold(
          appBar: PreferredSize(
            preferredSize: Size(double.infinity, 60),
            child: TabBar(
                indicatorColor: Colors.pink,
                tabs: [
                  Tab(
                    child: Text("ALL",style: TextStyle(color: Colors.pink),),
                  ),Tab(
                    child: Text("Favorites",style: TextStyle(color: Colors.pink),),
                  )
                ]),
          ),
          body  : Container(
            color: Colors.grey,
            child: TabBarView(

                children: [
                  ListView.builder(
                      itemCount: 100,
                      itemBuilder: (context,index){
                        return Container(
                          child: Center(
                            child: Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Text("i am $index"),
                            ),
                          ),
                        );
                      }),
                  ListView.builder(
                      itemCount: 5,
                      itemBuilder: (context,index){
                        return Container(
                          child: Center(
                            child: Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Text("i am $index"),
                            ),
                          ),
                        );
                      })
                ]),
          ),
        ),
      ),
    );
  }
}

【讨论】：

【解决方案3】：

你可以通过扩展AppBar来创建你的应用栏

class MyAppBar extends AppBar {
  MyAppBar({PreferredSizeWidget child, Color backgroundColor})
      : super(bottom: child, backgroundColor: backgroundColor);

  @override
  Size get preferredSize => bottom.preferredSize;
}

class TemplesListingWithTabMode extends StatefulWidget {
  TemplesListingWithTabMode({Key key}) : super(key: key);

  @override
  _TemplesListingWithTabModeState createState() =>
      _TemplesListingWithTabModeState();
}

class _TemplesListingWithTabModeState extends State<TemplesListingWithTabMode> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: MyAppBar(
          backgroundColor: Colors.white,
          child: TabBar(indicatorColor: Colors.pink, tabs: [
            Tab(
              child: Text(
                "ALL",
                style: TextStyle(color: Colors.pink),
              ),
            ),
            Tab(
              child: Text(
                "Favorites",
                style: TextStyle(color: Colors.pink),
              ),
            )
          ]),
        ),
        body: Container(
          color: Colors.grey,
          child: TabBarView(children: [
            ListView.builder(
                itemCount: 100,
                itemBuilder: (context, index) {
                  return Container(
                    child: Center(
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text("i am $index"),
                      ),
                    ),
                  );
                }),
            ListView.builder(
                itemCount: 5,
                itemBuilder: (context, index) {
                  return Container(
                    child: Center(
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text("i am $index"),
                      ),
                    ),
                  );
                })
          ]),
        ),
      ),
    );
  }
}

【讨论】：

【解决方案4】：

import 'package:bubble_tab_indicator/bubble_tab_indicator.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';



class AppBarrTest extends StatefulWidget {
  @override
  _AppBarrTestState createState() => _AppBarrTestState();
}

class _AppBarrTestState extends State<AppBarrTest>with SingleTickerProviderStateMixin {

  int index = 0;
  TabController _controller;

  @override
  void initState() {
    _controller = new TabController(length: 2, vsync: this);
    _controller.addListener(() {
      setState(() {});
    });
    super.initState();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }


  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
             flexibleSpace: fun_Appbar(),
          bottom: PreferredSize(
            preferredSize: Size.fromHeight(50),
            child: Column(
              children: <Widget>[
                Card(
                  shape: Border.all(color: Colors.blue),
                  color: Colors.white,
                  child: fun_tabBar(20),
                ),
              ],
            ),
          ),

      ),
      ),
    );
  }

  fun_Appbar(){
    double h = MediaQuery.of(context).size.height;
    return Container(

      height: 50,

      child: Center(
        child: Text(
          "Messages",
          style: TextStyle(
            fontSize: 22,
            color: Colors.white,
            letterSpacing: 2.0,
            fontFamily: 'Nunito',
          ),
        ),
      ),
    );

  }
  fun_tabBar(double fontSize){
    return TabBar(
      controller: _controller,

      //indicatorWeight: 20,
      indicatorSize: TabBarIndicatorSize.label,
      labelPadding: EdgeInsets.only(left: 0, right: 0),
      dragStartBehavior: DragStartBehavior.start,
      unselectedLabelColor: Colors.black,

      indicatorColor: Colors.red,
      indicator: new BubbleTabIndicator(
        indicatorHeight: 40.0,
        indicatorColor: Color(0xFF343193),
        //padding: EdgeInsets.all(20),
        tabBarIndicatorSize: TabBarIndicatorSize.tab,
        indicatorRadius: 30,
      ),

      tabs: <Widget>[
        Tab(
          child: Container(
            alignment: Alignment.center,

            child: Text(
              "Inbox",
              style: TextStyle(
                fontFamily: 'Nunito',
                fontSize: fontSize,
              ),
            ),
          ),
        ),
        Tab(
          child: Container(
            alignment: Alignment.center,

            child: Text(
              "Sent",
              style: TextStyle(
                fontFamily: 'Nunito',
                fontSize: fontSize,
              ),
            ),
          ),
        ),
      ],
    );
  }
}

bubble_tab_indicator: "^0.1.4"

或者只是用 SizeBox 包裹你的灵活空间并设置高度

  flexibleSpace: SizedBox(
                height: 100,
                child: TabBar(
                    indicatorColor: Colors.pink,
                    tabs: [
                      Tab(
                        child: Text("ALL",style: TextStyle(color: Colors.pink),),
                      ),Tab(
                        child: Text("Favorites",style: TextStyle(color: Colors.pink),),
                      )
                    ]),
              ),

【讨论】：

【解决方案5】：

默认情况下，ListView 的行为就像 SafeArea 已打开一样。将填充设置为零将删除该空白。

ListView(
padding: EdgeInsets.zero;
...
);

Discussion on ListView and the default SafeArea

【讨论】：