Flutter水平选择器插件horizontal_picker_tabs的使用

特性

开始使用

在 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  horizontal_picker_tabs: ^版本号

然后运行以下命令以安装依赖：

dart pub add horizontal_picker_tabs

使用方法

以下是完整的示例代码，展示如何使用 horizontal_picker_tabs 插件：

import 'package:flutter/material.dart';
import 'package:horizontal_picker_tabs/horizontal_picker_tabs.dart';
import 'package:horizontal_picker_tabs/picker_tabs.dart';

void main() {
  runApp(MaterialApp(home: MyApp()));
}

class MyApp extends StatefulWidget {
  List<String> tabs = ["选项1", "选项2", "选项3", "选项4", "选项5"]; // 定义选项标签

  MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<StatefulWidget> createState() {
    return MyAppState();
  }
}

class MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  late TabController _tabController;

  int currentPage = 0;
  TextStyle labelStyle =
      const TextStyle(fontSize: 16, fontWeight: FontWeight.w600); // 选中标签样式
  TextStyle unselectedLabelStyle = const TextStyle(
    fontSize: 16,
    fontWeight: FontWeight.w600,
  ); // 未选中标签样式

  [@override](/user/override)
  void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: widget.tabs.length)
      ..addListener(() {
        if (currentPage != _tabController.index) {
          setState(() {
            currentPage = _tabController.index;
          });
        }
      });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      backgroundColor: Colors.black,
      body: Stack(children: [
        PickerTabBarView(
          controller: _tabController,
          children: getTabViewList(), // 渲染每个选项对应的页面
        ),

        // 装饰底部卡尺
        Positioned(
          bottom: 0,
          left: 0,
          right: 0,
          child: Container(
            height: 100,
            color: Colors.black54,
          ),
        ),

        // 装饰底部图标
        const Positioned(
          bottom: 14,
          left: 0,
          right: 0,
          child: Image(
            height: 20,
            fit: BoxFit.fill,
            image: AssetImage("assets/images/lm_horizontal_picker_bottom_icon.png"),
          ),
        ),

        // 装饰滑块
        Positioned(
          bottom: 14,
          left: 0,
          right: 0,
          child: Center(
            child: Container(
              margin: const EdgeInsets.only(top: 2),
              width: 2,
              height: 16,
              color: const Color(0xFF7F5EFF),
            ),
          ),
        ),

        // 水平选项卡栏
        Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            HorizontalPickerTabBar(
              controller: _tabController,
              padding: const EdgeInsets.only(top: 15, bottom: 5),
              labelColor: Colors.white, // 选中标签颜色
              labelStyle: labelStyle,
              unselectedLabelColor: const Color(0x99FFFFFF), // 未选中标签颜色
              unselectedLabelStyle: unselectedLabelStyle,
              tabs: widget.tabs, // 设置选项标签
            ),
          ],
        )
      ]),
    );
  }

  [@override](/user/override)
  void dispose() {
    // 释放 TabController
    _tabController.dispose();
    super.dispose();
  }

  getTabViewList() {
    List<Widget> list = [];
    for (int i = 0; i < widget.tabs.length; i++) {
      list.add(Image.asset("assets/images/img_$i.webp", fit: BoxFit.cover)); // 渲染每个选项的页面内容
    }
    return list;
  }
}