Flutter垂直标签页插件vertical_tabs的使用
Flutter垂直标签页插件vertical_tabs的使用
垂直标签页插件vertical_tabs简介
vertical_tabs 是一个用于 Flutter 框架的垂直标签页插件。通过此插件，您可以轻松实现带有垂直标签的页面切换功能。
开始使用
安装插件
在您的 pubspec.yaml 文件中添加以下依赖：
dependencies:
vertical_tabs: ^0.1.0
然后运行 flutter pub get 来安装依赖。
示例代码
以下是一个简单的使用示例，展示如何使用 vertical_tabs 插件来创建一个带有垂直标签的页面。
import 'package:flutter/material.dart';
import 'package:vertical_tabs/vertical_tabs.dart';
void main() => runApp(Home());
class Home extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Vertical Tabs Demo',
home: Scaffold(
body: SafeArea(
child: Column(
children: <Widget>[
Expanded(
child: Container(
child: VerticalTabs(
// 设置标签栏宽度
tabsWidth: 150,
// 定义标签列表
tabs: [
Tab(child: Text('Flutter'), icon: Icon(Icons.phone)),
Tab(child: Text('Dart')),
Tab(
child: Container(
margin: EdgeInsets.only(bottom: 1),
child: Row(
children: <Widget>[
Icon(Icons.favorite),
SizedBox(width: 25),
Text('Javascript'),
],
),
),
),
Tab(child: Text('NodeJS')),
Tab(child: Text('PHP')),
Tab(child: Text('HTML 5')),
Tab(child: Text('CSS 3')),
],
// 定义内容列表
contents: [
tabsContent('Flutter', 'Flutter 页面内容'),
tabsContent('Dart', 'Dart 页面内容'),
tabsContent('Javascript', 'Javascript 页面内容'),
tabsContent('NodeJS', 'NodeJS 页面内容'),
Container(
color: Colors.black12,
child: ListView.builder(
itemCount: 10,
itemExtent: 100,
itemBuilder: (context, index) {
return Container(
margin: EdgeInsets.all(10),
color: Colors.white30,
);
},
),
),
tabsContent('HTML 5', 'HTML 5 页面内容'),
Container(
color: Colors.black12,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 10,
itemExtent: 100,
itemBuilder: (context, index) {
return Container(
margin: EdgeInsets.all(10),
color: Colors.white30,
);
},
),
),
],
),
),
),
],
),
),
),
);
}
// 定义标签内容
Widget tabsContent(String caption, [String description = '']) {
return Container(
margin: EdgeInsets.all(10),
padding: EdgeInsets.all(20),
color: Colors.black12,
child: Column(
children: <Widget>[
Text(
caption,
style: TextStyle(fontSize: 25),
),
Divider(height: 20, color: Colors.black45),
Text(
description,
style: TextStyle(fontSize: 15, color: Colors.black87),
),
],
),
);
}
}
更多关于Flutter垂直标签页插件vertical_tabs的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter垂直标签页插件vertical_tabs的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
在Flutter中，vertical_tabs 是一个用于创建垂直标签页的插件。它允许你以垂直布局的方式显示标签页，这在某些应用场景中非常有用，比如在设置页面或者需要显示大量分类内容的界面。
安装插件
首先，你需要在 pubspec.yaml 文件中添加 vertical_tabs 插件的依赖：
dependencies:
flutter:
sdk: flutter
vertical_tabs: ^0.3.0
然后运行 flutter pub get 来安装插件。
使用 VerticalTabs 组件
vertical_tabs 插件提供了一个 VerticalTabs 组件，你可以使用它来创建垂直标签页。以下是一个简单的示例，展示了如何使用 VerticalTabs 组件：
import 'package:flutter/material.dart';
import 'package:vertical_tabs/vertical_tabs.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Vertical Tabs Example'),
),
body: VerticalTabs(
tabsWidth: 100.0,
tabs: <Tab>[
Tab(child: Text('Tab 1')),
Tab(child: Text('Tab 2')),
Tab(child: Text('Tab 3')),
],
contents: <Widget>[
Center(child: Text('Content of Tab 1')),
Center(child: Text('Content of Tab 2')),
Center(child: Text('Content of Tab 3')),
],
),
),
);
}
}
参数说明
tabsWidth: 设置标签栏的宽度。tabs: 一个List<Tab>，用于定义每个标签的标题。contents: 一个List<Widget>，用于定义每个标签页的内容。
自定义样式
你可以通过 VerticalTabs 的其他参数来自定义样式，比如标签的颜色、选中标签的颜色、标签栏的背景色等。
VerticalTabs(
tabsWidth: 100.0,
tabs: <Tab>[
Tab(child: Text('Tab 1')),
Tab(child: Text('Tab 2')),
Tab(child: Text('Tab 3')),
],
contents: <Widget>[
Center(child: Text('Content of Tab 1')),
Center(child: Text('Content of Tab 2')),
Center(child: Text('Content of Tab 3')),
],
selectedTabBackgroundColor: Colors.blue,
unselectedTabBackgroundColor: Colors.grey,
tabTextStyle: TextStyle(color: Colors.white),
selectedTabTextStyle: TextStyle(color: Colors.yellow),
)
其他功能
VerticalTabs 还支持其他一些功能，比如：
onChange: 当用户切换标签时触发。initialIndex: 设置初始选中的标签索引。
VerticalTabs(
initialIndex: 1,
onChange: (index) {
print('Selected tab index: $index');
},
tabsWidth: 100.0,
tabs: <Tab>[
Tab(child: Text('Tab 1')),
Tab(child: Text('Tab 2')),
Tab(child: Text('Tab 3')),
],
contents: <Widget>[
Center(child: Text('Content of Tab 1')),
Center(child: Text('Content of Tab 2')),
Center(child: Text('Content of Tab 3')),
],
)