Flutter 使用Tabbar不要Title
时间: 2023-06-28 07:04:04 浏览: 62
如果你想在 Flutter 中使用 `TabBar`,但是不想要标签的标题,可以通过设置 `Tab` 的 `child` 属性为一个空的 `Container` 来实现。
以下是一个简单的示例代码:
```
TabBar(
tabs: [
Tab(child: Container()),
Tab(child: Container()),
Tab(child: Container()),
],
)
```
请注意,这只是一种实现方式,您可以根据自己的需求进行调整。
相关问题
flutter TabBar pageview组合使用
在Flutter中,可以通过将TabBar和PageView组合在一起来创建具有选项卡的页面滚动视图。下面是一个简单的示例,演示如何使用TabBar和PageView来创建具有选项卡的页面滚动视图。
首先,我们需要在代码中导入必要的库:
```dart
import 'package:flutter/material.dart';
```
然后,我们可以创建一个StatefulWidget,其中包含一个TabBar和一个PageView。在这个示例中,我们将创建一个具有三个选项卡的滚动视图,每个选项卡都包含一个文本控件。
```dart
class MyTabbedPage extends StatefulWidget {
@override
_MyTabbedPageState createState() => _MyTabbedPageState();
}
class _MyTabbedPageState extends State<MyTabbedPage> {
final List<Tab> myTabs = <Tab>[
Tab(text: 'Tab 1'),
Tab(text: 'Tab 2'),
Tab(text: 'Tab 3'),
];
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: myTabs.length,
child: Scaffold(
appBar: AppBar(
title: Text('My Tabbed Page'),
bottom: TabBar(
tabs: myTabs,
),
),
body: TabBarView(
children: myTabs.map((Tab tab) {
return Center(child: Text(tab.text));
}).toList(),
),
),
);
}
}
```
在这个示例中,我们首先定义了一个包含三个选项卡的TabBar。然后,我们使用DefaultTabController来指定选项卡的数量,并将TabBar包装在AppBar中。最后,我们使用TabBarView来构建页面视图,并将一个文本控件放在每个选项卡中间。
现在,我们可以将MyTabbedPage添加到我们的应用程序中:
```dart
void main() {
runApp(MaterialApp(
title: 'My App',
home: MyTabbedPage(),
));
}
```
这样,我们就可以创建一个具有选项卡的页面滚动视图,用户可以在不同的选项卡之间滚动并查看不同的页面内容。
Flutter 监听 tabBar 左右滑动事件
在 Flutter 中,可以通过使用 `TabBarView` 和 `PageView` 来实现 TabBar 的左右滑动事件监听。具体步骤如下:
1. 创建一个 `TabController` 对象,并将其与 `TabBar` 和 `TabBarView` 绑定:
```dart
TabController _tabController;
@override
void initState() {
_tabController = TabController(length: 3, vsync: this);
super.initState();
}
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Tab Bar Example'),
bottom: TabBar(
controller: _tabController,
tabs: [
Tab(text: 'Tab 1'),
Tab(text: 'Tab 2'),
Tab(text: 'Tab 3'),
],
),
),
body: TabBarView(
controller: _tabController,
children: [
Container(color: Colors.red),
Container(color: Colors.green),
Container(color: Colors.blue),
],
),
);
}
```
2. 使用 `PageView` 包裹 `TabBarView`,并监听 `PageView` 的 `onPageChanged` 事件,以获取左右滑动事件:
```dart
PageController _pageController;
@override
void initState() {
_tabController = TabController(length: 3, vsync: this);
_pageController = PageController(initialPage: 0);
super.initState();
}
@override
void dispose() {
_tabController.dispose();
_pageController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Tab Bar Example'),
bottom: TabBar(
controller: _tabController,
tabs: [
Tab(text: 'Tab 1'),
Tab(text: 'Tab 2'),
Tab(text: 'Tab 3'),
],
),
),
body: PageView(
controller: _pageController,
children: [
Container(color: Colors.red),
Container(color: Colors.green),
Container(color: Colors.blue),
],
onPageChanged: (index) {
_tabController.animateTo(index);
},
),
);
}
```
这样,就可以通过监听 `PageView` 的 `onPageChanged` 事件来获取 TabBar 的左右滑动事件了。注意,需要在 `onPageChanged` 事件中手动调用 `_tabController.animateTo(index)` 来更新 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)