我想做的是添加 tabBar 的底部边框,这样它将位于选项卡标题下方和 indicatorColor 上方,对于 Activity 和非 Activity 选项卡,就像附加的图像一样。
红线是我要添加的,绿线是指示器颜色。
请注意,通常我使用“bottom”为 appBar 执行此操作,但此处 bottom 保留给 TabBar。
这可能吗?
非常感谢
最佳答案
您可以像 abdulrahmanAbdullah 所说的那样设置 AppBar shape
属性。但是如果你确实需要指示符上方的边框,你可以将它放在每个标签栏项目的内部。这是一种看法:
import 'package:flutter/material.dart';
void main() {
runApp(TabBarDemo());
}
class TabBarDemo extends StatelessWidget {
Widget _createTab(String text) {
return Tab(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: Container(
child: Center(child: Text(text)),
decoration: BoxDecoration(border: Border(bottom: BorderSide(color: Colors.black)))
)
),
]
),
);
}
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primaryColor: Colors.white,
),
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
elevation: 0,
bottom: TabBar(
labelPadding: EdgeInsets.all(0),
tabs: [
_createTab("Tab 1"),
_createTab("Tab 2"),
_createTab("Tab 3"),
],
),
title: Text('Tabs Demo'),
),
body: TabBarView(
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
],
),
),
),
);
}
}
关于android - 为 Flutter 中的选项卡添加底部边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57333173/