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

问题描述 投票：0回答：6

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

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

flutter flutter-layout
6个回答
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"),
                            ),
                          ),
                        );
                      })
                ]),
          ),
        ),
      ),
    );
  }
}
2
投票

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

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

ListView和默认SafeArea的讨论

0
投票

在

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

希望这能回答你的问题。

0
投票

您可以通过扩展

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

以防万一需要用条子做：

MediaQuery.removePadding 需要从 SliverAppBar 中删除 SafeArea 填充。如果你需要 SafeArea - 在没有 MediaQuery.removePadding 的情况下使用。

MediaQuery.removePadding(
  context: context,
  removeTop: true,
  child: SliverAppBar(
    pinned: true,
    automaticallyImplyLeading: false,
    primary: false,
    toolbarHeight: 0,
    bottom: PreferredSize(
      preferredSize: Size.fromHeight(kToolbarHeight),
      child: TabBar(),
    ),
    titleSpacing: 0,
  ),
)
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.