首页 文章

没有AppBar的Flutter TabBar

提问于
浏览 次
3

我试图创建一个没有AppBar的标签栏布局屏幕 . 我已经在这个链接上提到了解决方案：how to create the tab bar without app bar in flutter?但它对我不起作用 . 当我将TabBar放在 appbar: 参数中时，这是我的屏幕的样子：

enter image description here

我的TabBar已经移动到状态栏下方的左上角，并且它全部挤在一个角落里 . 这几乎就好像根本就没有 .

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

enter image description here

TabBar顶部有一个丑陋的空间，显然是AppBar Headers . 这是我的代码：

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()
      ),
    );

如何在没有顶部的空间的情况下使用TabBar，是否可以使两个标签项及其指示器伸展并填充侧面空间？

dart flutter

1 回答

  • 8

    你的第一个截图实际上显示它工作得很好 - 问题是“好”并不是你所期望的 . 对于标签栏，默认文本颜色为白色，因此您的标签不显示，而只显示底线，这是您在左上角看到的 . 此外，TabBar已经是一个首选的大小小部件，但它与AppBar的高度不同，所以如果这就是你想要的，它看起来就不像了 .

    这是一个让它看起来像应用栏的例子 . kToolbarHeight 与AppBar使用的常量相同 .

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

    结果如下：

    Screenshot showing tabbed app bar

    回复于

相关问题