Question

我需要添加一个不带应用栏的标签栏，而我从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。结果是

如何从应用栏上删除这个小小的底部？

Answer 1

原因是AppBar的大小+状态栏的大小。有多种解决方法。如其他答案所述，简单的方法是添加SafeArea。

请注意，即使在两个标签下您都将获得难看的空白空间。

要解决此问题，您可以使用PrefferedSize（还有其他方法）。

上述屏幕截图的代码：

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"),
                            ),
                          ),
                        );
                      })
                ]),
          ),
        ),
      ),
    );
  }
}

Answer 2

在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),),
                  )
                ]),)
              ),

希望这能回答您的问题。

Answer 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"),
                      ),
                    ),
                  );
                })
          ]),
        ),
      ),
    );
  }
}

Answer 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),),
                      )
                    ]),
              ),

Answer 5

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

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

Discussion on ListView and the default SafeArea

如何从默认选项卡栏删除底部

5 个答案: