我正在尝试创建一个没有 AppBar 的选项卡式栏布局屏幕。我已经在这个链接上提到了解决方案:how to create the tab bar without app bar in flutter?但这对我不起作用。当我将 TabBar 放在 appbar:
参数中时,我的屏幕如下所示:
我的 TabBar 已移至状态栏下方的左上角,并且全部挤在一个角落。就好像它根本不存在一样。
当我使用 AppBar 类但只传递 bottom:
参数时,会发生以下情况:
TabBar 顶部有一个丑陋的空间,显然是为 AppBar 标题设计的。这是我的代码:
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 顶部没有那个空间?是否可以让两个选项卡项及其指示器拉伸(stretch)并填充侧面空间?
最佳答案
您的第一个屏幕截图实际上显示它运行良好 - 问题是“良好”并不是您所期望的。标签栏的默认文本颜色为白色,因此您的标签不会显示,而只是底线,这就是您在左上角看到的内容。此外,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")],
)
],
),
),
),
);
}
}
结果如下:
编辑:
正如评论和 this github issue 中所述,你也可以使用AppBar的flexibleSpace属性来保持tabbar,效果基本一样:
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)),
],
),
],
),
),
),
);
https://stackoverflow.com/questions/50609252/