Flutter垂直标签页插件vertical_tabs_flutter的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter垂直标签页插件vertical_tabs_flutter的使用

垂直标签页

vertical_tabs_flutter 是一个用于 Flutter 框架的垂直标签页组件。

开始使用

以下是一个简单的使用示例。更多示例可以查看 Examples 目录。如需了解所有设置，请访问该插件的 API 参考文档。

VerticalTabs(
  tabsWidth: 150,
  tabs: [
    Tab(child: Text('Flutter'), icon: Icon(Icons.phone)),
    Tab(child: Text('Dart')),
    Tab(child: Text('NodeJS')),
    Tab(child: Text('PHP')),
    Tab(child: Text('HTML 5')),
  ],
  contents: [
    Container(child: Text('Flutter'), padding: EdgeInsets.all(20)),
    Container(child: Text('Dart'), padding: EdgeInsets.all(20)),
    Container(child: Text('NodeJS'), padding: EdgeInsets.all(20)),
    Container(child: Text('PHP'), padding: EdgeInsets.all(20)),
    Container(child: Text('HTML 5'), padding: EdgeInsets.all(20))
  ],
)

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 vertical_tabs_flutter 插件。

import 'package:flutter/material.dart';
import 'package:vertical_tabs_flutter/vertical_tabs.dart';

void main() => runApp(const Home());

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '垂直标签页示例',
      home: Scaffold(
        body: SafeArea(
          child: Column(
            children: [
              SizedBox(
                height: 300,
                child: VerticalTabs(
                  tabsWidth: 150,
                  direction: TextDirection.ltr,
                  contentScrollAxis: Axis.vertical,
                  changePageDuration: const Duration(milliseconds: 500),
                  tabs: [
                    const Tab(child: Text('Flutter'), icon: Icon(Icons.phone)),
                    const Tab(child: Text('Dart')),
                    Tab(
                      child: Container(
                        margin: const EdgeInsets.only(bottom: 1),
                        child: Row(
                          children: const [
                            Icon(Icons.favorite),
                            SizedBox(width: 25),
                            Text('Javascript'),
                          ],
                        ),
                      ),
                    ),
                    const Tab(child: Text('NodeJS')),
                    const Tab(child: Text('PHP')),
                  ],
                  contents: [
                    tabsContent('Flutter', 'You can change page by scrolling content vertically'),
                    tabsContent('Dart'),
                    tabsContent('Javascript'),
                    tabsContent('NodeJS'),
                    Container(
                        color: Colors.black12,
                        child: ListView.builder(
                            itemCount: 10,
                            itemExtent: 100,
                            scrollDirection: Axis.horizontal,
                            itemBuilder: (context, index) {
                              return Container(
                                margin: const EdgeInsets.all(10),
                                color: Colors.white30,
                              );
                            })),
                  ],
                ),
              ),
              const Divider(
                height: 20,
                color: Colors.black87,
              ),
              SizedBox(
                height: 300,
                child: VerticalTabs(
                  tabsWidth: 150,
                  direction: TextDirection.ltr,
                  changePageDuration: const Duration(milliseconds: 500),
                  tabs: [
                    const Tab(child: Text('Flutter'), icon: Icon(Icons.phone)),
                    const Tab(child: Text('Dart')),
                    Tab(
                      child: Container(
                        margin: const EdgeInsets.only(bottom: 1),
                        child: Row(
                          children: const [
                            Icon(Icons.favorite),
                            SizedBox(width: 25),
                            Text('Javascript'),
                          ],
                        ),
                      ),
                    ),
                    const Tab(child: Text('NodeJS')),
                    const Tab(child: Text('PHP')),
                  ],
                  contents: [
                    tabsContent('Flutter', 'You can change page by scrolling content horizontally'),
                    tabsContent('Dart'),
                    tabsContent('Javascript'),
                    tabsContent('NodeJS'),
                    Container(
                        color: Colors.black12,
                        child: ListView.builder(
                            itemCount: 10,
                            itemExtent: 100,
                            scrollDirection: Axis.vertical,
                            itemBuilder: (context, index) {
                              return Container(
                                margin: const EdgeInsets.all(10),
                                color: Colors.white30,
                              );
                            })),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget tabsContent(String caption, [String description = '']) {
    return Container(
      margin: const EdgeInsets.all(10),
      padding: const EdgeInsets.all(20),
      color: Colors.black12,
      child: Column(
        children: [
          Text(
            caption,
            style: const TextStyle(fontSize: 25),
          ),
          const Divider(
            height: 20,
            color: Colors.black45,
          ),
          Text(
            description,
            style: const TextStyle(fontSize: 15, color: Colors.black87),
          ),
        ],
      ),
    );
  }
}

更多关于Flutter垂直标签页插件vertical_tabs_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter垂直标签页插件vertical_tabs_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter项目中使用vertical_tabs_flutter插件的示例代码。这个插件允许你创建一个垂直标签页的界面。

首先，你需要在你的pubspec.yaml文件中添加vertical_tabs_flutter依赖：

dependencies:
  flutter:
    sdk: flutter
  vertical_tabs_flutter: ^最新版本号 # 请替换为实际的最新版本号

然后运行flutter pub get来安装依赖。

接下来，你可以在你的Flutter应用中按照以下方式使用VerticalTabs组件：

import 'package:flutter/material.dart';
import 'package:vertical_tabs_flutter/vertical_tabs_flutter.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Vertical Tabs Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: VerticalTabsDemo(),
    );
  }
}

class VerticalTabsDemo extends StatefulWidget {
  @override
  _VerticalTabsDemoState createState() => _VerticalTabsDemoState();
}

class _VerticalTabsDemoState extends State<VerticalTabsDemo> {
  final List<String> tabLabels = ['Tab 1', 'Tab 2', 'Tab 3'];
  final List<Widget> tabContents = [
    Center(child: Text('Content of Tab 1')),
    Center(child: Text('Content of Tab 2')),
    Center(child: Text('Content of Tab 3')),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Vertical Tabs Flutter Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: VerticalTabs(
          tabs: tabLabels.map((label) => VerticalTab(title: label)).toList(),
          builder: (context, index) {
            return tabContents[index];
          },
        ),
      ),
    );
  }
}

在这个示例中：

  1. 我们首先定义了一个包含标签标题的列表tabLabels和一个包含每个标签对应内容的列表tabContents。
  2. 在VerticalTabsDemo组件中，我们使用VerticalTabs组件来创建垂直标签页。
  3. VerticalTabs组件接受两个主要参数：
    • tabs：一个VerticalTab对象的列表，每个对象包含一个标签的标题。
    • builder：一个函数，它根据当前选中的标签索引返回相应的内容。

这样，你就可以在Flutter应用中创建一个简单的垂直标签页界面了。vertical_tabs_flutter插件提供了很多自定义选项，你可以根据需要进一步配置标签的外观和行为。更多详细信息和配置选项，请参考vertical_tabs_flutter的官方文档。

回到顶部