没有AppBar的Flutter TabBar [英] Flutter TabBar Without AppBar

问题描述

我试图创建一个没有AppBar的选项卡式布局屏幕。我已经在此链接上提及了该解决方案：

我的TabBar已移到状态栏下方的左上角，所有位置都挤在一个角上。几乎好像根本不存在。

当我使用AppBar类但仅传递 bottom：参数时，会发生以下情况：

TabBar顶部有一个难看的空间，这显然是表示AppBar标题。这是我的代码：

 返回新的脚手架（
 appBar：新的TabBar（
标签：小部件）。 _tabs.map（（_ Page page）{
 return Text（page.tabTitle）; 
}）。toList（），
控制器：_tabController，
 isScrollable：true，
 
），
 backgroundColor：Colors.white，
 body：new TabBarView（
 controller：_tabController，
 children：widget._tabs.map（（_ Page页面）{
返回新的SafeArea（
 top：false，
 bottom：false，
 child：（page.page == Pages.cart？new CartHomeScreen（）：_ lunchesLayout（） ）
）; 
}）。toList（）
），
）; 
  

我该如何在顶部没有该空格的情况下放置TabBar，是否可以使两个标签项

解决方案

您的第一个屏幕截图实际上显示其工作正常-问题是很好不是您所期望的。标签栏的默认文本颜色为白色，因此不会显示标签，而只会显示底行，这就是您在左上方看到的内容。另外，TabBar已经是首选的尺寸小部件，但是它与AppBar的高度不同，因此如果您要使用它，它将看起来像它。

这是一个使其看起来像应用程序栏的示例。 kToolbarHeight 是AppBar使用的常数。

  import'包： flutter / material.dart'; 
 
 void main（）=> runApp（new MyApp（））; 
 
类MyApp扩展了StatefulWidget {
 @override 
 State< StatefulWidget> createState（）=>新的MyAppState（）; 
} 
 
类MyAppState扩展了State< MyApp> {
 @override 
 Widget build（BuildContext context）{
 return new MaterialApp（
 title：'msc'，
 home：new DefaultTabController（
 length ：2，2，
子代：新的脚手架（
 appBar：新的PreferredSize（
首选大小：Size.fromHeight（kToolbarHeight），
子代：新的Container（
颜色：颜色.green，
子级：新的SafeArea（
子级：Column（
子级：< Widget> [
 new Expanded（子级：new Container（）），
 new TabBar（
标签：[new Text（ Lunches），new Text（ Cart）]，
），
]，
），
） ，
），
），
正文：new TabBarView（
子项：< Widget> [
新列（
子项：< Widget> ; [new Text（ Lunches Page）]，
），
 new Column（
 children：< Widget> [new Text（ Cart Page）]，
 ）
]，
），
），
），
）； 
} 
} 
  

其中的结果是：

编辑：

如评论中以及此github问题所述，您也可以使用AppBar的flexibleSpace属性来使标签栏保持基本相同的效果：

 返回新的DefaultTabController（
长度：3，
子项：new脚手架（
 appBar：新建AppBar（
 flexibleSpace：新列（
 mainAxisAlignment：MainAxisAlignment.end，
子项：[
 new TabBar（
 tabs：[
 new Tab（icon：new Icon（Icons.directions_car）），
 new Tab（icon：new Icon（Icons.directions_transit）），
 new Tab（icon：new Icon（Icons.directions_bike）），
]，
），
]，
），
），
）， 
）; 
  

I am trying to create a tabbed bar layout screen without the AppBar though. I have already referred to the solution on this link: how to create the tab bar without app bar in flutter? but it is not working for me. Here is what my screen looks like when I place TabBar in the appbar: parameter:

My TabBar has moved to the top left corner under the status bar and its all squeezed in one corner. It's almost as if it's not there at all.

When I use the AppBar class but only pass the bottom: parameter here is what happens:

There is an ugly space on top of the TabBar which is obviously meant for the AppBar title. Here is my code:

return new Scaffold(
      appBar: new TabBar(
        tabs: widget._tabs.map((_Page page){
          return Text(page.tabTitle);
        }).toList(),
        controller: _tabController,
        isScrollable: true,

      ),
      backgroundColor: Colors.white,
      body: new TabBarView(
          controller: _tabController,
          children: widget._tabs.map((_Page page){
            return new SafeArea(
                top:false,
                bottom: false,
                child: (page.page == Pages.cart?new CartHomeScreen():_lunchesLayout())
            );
          }).toList()
      ),
    );

How can I just have TabBar without that space on top and is it possible to make the two tab items and their indicators to stretch and fill the side spaces?

解决方案

Your first screenshot actually shows it working just fine - the issue is that 'fine' isn't quite what you expect. The default text color is white for tabbar, so your labels aren't showing and instead just the bottom line is, which is what you see at the top left. Also, TabBar is a preferred size widget already, but it doesn't have the same height as an AppBar so if that's what you're going for, it won't look like it.

Here's an example that makes it look like the app bar. kToolbarHeight is the same constant that AppBar uses.

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new MyAppState();
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'msc',
      home: new DefaultTabController(
        length: 2,
        child: new Scaffold(
          appBar: new PreferredSize(
            preferredSize: Size.fromHeight(kToolbarHeight),
            child: new Container(
              color: Colors.green,
              child: new SafeArea(
                child: Column(
                  children: <Widget>[
                    new Expanded(child: new Container()),
                    new TabBar(
                      tabs: [new Text("Lunches"), new Text("Cart")],
                    ),
                  ],
                ),
              ),
            ),
          ),
          body: new TabBarView(
            children: <Widget>[
              new Column(
                children: <Widget>[new Text("Lunches Page")],
              ),
              new Column(
                children: <Widget>[new Text("Cart Page")],
              )
            ],
          ),
        ),
      ),
    );
  }
}

Which results in this:

Edit:

As noted in the comments and from this github issue, you could also use the flexibleSpace property of the AppBar to hold the tabbar to basically the same effect:

return new DefaultTabController(
  length: 3,
  child: new Scaffold(
    appBar: new AppBar(
      flexibleSpace: new Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          new TabBar(
            tabs: [
              new Tab(icon: new Icon(Icons.directions_car)),
              new Tab(icon: new Icon(Icons.directions_transit)),
              new Tab(icon: new Icon(Icons.directions_bike)),
            ],
          ),
        ],
      ),
    ),
  ),
);

这篇关于没有AppBar的Flutter TabBar的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！