flutter TabBar边框
时间: 2023-07-30 10:10:02 浏览: 62
要为 Flutter 的 TabBar 添加边框,你可以使用 `DecoratedBox` 组件来装饰 TabBar。下面是一个示例代码:
```dart
TabBar(
tabs: [
Tab(text: 'Tab 1'),
Tab(text: 'Tab 2'),
Tab(text: 'Tab 3'),
],
indicator: DecoratedBox(
decoration: BoxDecoration(
border: Border.all(color: Colors.black, width: 1.0),
),
child: TabBar(indicator: BoxDecoration()),
),
)
```
在这个示例中,我们在 TabBar 的 `indicator` 属性中使用 `DecoratedBox` 组件来添加边框。`Border.all` 方法用于创建一个黑色边框,你可以根据需要自定义颜色和宽度。
相关问题
Flutter TabBar导航
好的,关于Flutter TabBar导航,我们可以通过TabBar和TabBarView来实现。
首先,需要在Scaffold的appBar属性中添加一个TabBar,然后在Scaffold的body属性中添加一个TabBarView来显示与选定选项卡对应的内容。具体实现代码如下:
```
class MyTabbedPage extends StatefulWidget {
const MyTabbedPage({Key? key}) : super(key: key);
@override
State<MyTabbedPage> createState() => _MyTabbedPageState();
}
class _MyTabbedPageState extends State<MyTabbedPage>
with SingleTickerProviderStateMixin {
late final TabController _tabController;
@override
void initState() {
super.initState();
_tabController = TabController(length: 3, vsync: this);
}
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('TabBar Demo'),
bottom: TabBar(
controller: _tabController,
tabs: const [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
),
body: TabBarView(
controller: _tabController,
children: const [
Center(
child: Text('Car'),
),
Center(
child: Text('Transit'),
),
Center(
child: Text('Bike'),
),
],
),
);
}
}
```
此代码将创建一个具有三个选项卡的TabBar,并使用三个Center Widget作为TabBarView的子项。
flutter tabbar 居中
要将Flutter中的TabBar居中,可以通过使用DefaultTabController结合TabBar和TabBarView来实现。
首先,在Scaffold的appBar属性中创建一个TabBar,并设置为居中显示。代码如下:
```dart
appBar: AppBar(
title: Text("TabBar示例"),
bottom: PreferredSize(
preferredSize: Size.fromHeight(40.0),
child: TabBar(
indicatorColor: Colors.white,
labelColor: Colors.white,
unselectedLabelColor: Colors.grey,
tabs: [
Tab(
text: "Tab 1",
),
Tab(
text: "Tab 2",
),
Tab(
text: "Tab 3",
),
],
),
),
),
```
接着,在Scaffold的body属性中创建一个TabBarView,用于显示对应的内容页面。代码如下:
```dart
body: TabBarView(
children: [
Center(
child: Text("内容1"),
),
Center(
child: Text("内容2"),
),
Center(
child: Text("内容3"),
),
],
),
```
然后,在StatefulWidget中使用DefaultTabController包裹Scaffold并设置length属性,来指定TabBar中Tab的数量。代码如下:
```dart
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
title: Text("TabBar示例"),
bottom: PreferredSize(
preferredSize: Size.fromHeight(40.0),
child: TabBar(
indicatorColor: Colors.white,
labelColor: Colors.white,
unselectedLabelColor: Colors.grey,
tabs: [
Tab(
text: "Tab 1",
),
Tab(
text: "Tab 2",
),
Tab(
text: "Tab 3",
),
],
),
),
),
body: TabBarView(
children: [
Center(
child: Text("内容1"),
),
Center(
child: Text("内容2"),
),
Center(
child: Text("内容3"),
),
],
),
),
);
}
```
通过以上方法,就可以实现在Flutter中将TabBar居中显示的效果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)