Flutter数据展示插件wp_pivot_flutter的使用

wp_pivot_flutter

A Flutter包，灵感来源于Windows Phone风格的Pivot标签。

示例

当前插件使用GlobalKey来访问子函数。下一个版本将实现控制器。

import 'package:wp_pivot_flutter/wp_pivot_flutter.dart';

GlobalKey<WpPivotState> globalKey = GlobalKey();

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.black,
    appBar: WpPivot(
      key: globalKey,
      backgroundColor: Colors.black,
      fontSize: 42,
      fontWeight: FontWeight.w400,
      selectedTabColor: Colors.white,
      unselectedTabColor: Colors.white38,
      tabTitles: [
        "Tab 1",
        "Tab 2",
        "Tab 3",
        "Tab 4",
      ],
      title: "Title",
      titleColor: Colors.white,
      titleFontSize: 14,
      titleFontWeight: FontWeight.bold,
    ),
  );
}

贡献者 ✨

感谢以下贡献者：

此项目遵循all-contributors规范。任何类型的贡献都欢迎！

Starware

wp_pivot_flutter 是Starware。 这意味着你可以自由使用该项目，只要给其GitHub仓库点赞。 你的赞赏使我们成长并发光。⭐

完整示例代码

以下是完整的示例代码，展示了如何使用wp_pivot_flutter插件来创建一个包含多个标签页的应用。

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

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

class MyApp extends StatelessWidget {
  // 这个小部件是应用的根节点
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        fontFamily: 'Segoe',
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 创建一个全局键用于访问WpPivot的状态
  GlobalKey<WpPivotState> globalKey = GlobalKey();
  
  // 创建一个PageController来控制页面视图
  PageController pageController = PageController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: WpPivot(
        key: globalKey,
        backgroundColor: Colors.black,
        fontSize: 36.2,
        fontWeight: FontWeight.w400,
        selectedTabColor: Colors.white,
        unselectedTabColor: Colors.white38,
        tabTitles: [
          "Tab 1",
          "Tab 2",
          "Tab 3",
          "Tab 4",
          "Tab 5",
          "Tab 6",
          "Tab 7",
          "Tab 8",
        ],
        title: "Title",
        titleColor: Colors.white,
        titleFontSize: 14,
        titleFontWeight: FontWeight.bold,
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: PageView(
          controller: pageController,
          onPageChanged: (value) => globalKey.currentState?.handlePagechange(value),
          children: [
            // 每个标签页的内容
            Align(
              alignment: Alignment.topLeft,
              child: Text(
                "这是第一个页面",
                style: TextStyle(color: Colors.white, fontSize: 24),
              ),
            ),
            Align(
              alignment: Alignment.topLeft,
              child: Text(
                "这是第二个页面",
                style: TextStyle(color: Colors.white, fontSize: 24),
              ),
            ),
            Align(
              alignment: Alignment.topLeft,
              child: Text(
                "这是第三个页面",
                style: TextStyle(color: Colors.white, fontSize: 24),
              ),
            ),
            Align(
              alignment: Alignment.topLeft,
              child: Text(
                "这是第四个页面",
                style: TextStyle(color: Colors.white, fontSize: 24),
              ),
            ),
            Align(
              alignment: Alignment.topLeft,
              child: Text(
                "这是第五个页面",
                style: TextStyle(color: Colors.white, fontSize: 24),
              ),
            ),
            Align(
              alignment: Alignment.topLeft,
              child: Text(
                "这是第六个页面",
                style: TextStyle(color: Colors.white, fontSize: 24),
              ),
            ),
            Align(
              alignment: Alignment.topLeft,
              child: Text(
                "这是第七个页面",
                style: TextStyle(color: Colors.white, fontSize: 24),
              ),
            ),
            Align(
              alignment: Alignment.topLeft,
              child: Text(
                "这是第八个页面",
                style: TextStyle(color: Colors.white, fontSize: 24),
              ),
            ),
          ],
        ),
      ),
    );
  }
}