Flutter页面指示器插件page_indicator的使用

Flutter页面指示器插件page_indicator的使用

page_indicator

• page_indicator
  • 预览
  • 安装
  • 使用
    • 强制刷新状态
  • 迁移指南

预览

安装

查看安装方法

1. 添加依赖到你的pubspec.yaml文件中：

dependencies:
  page_indicator: ^0.3.0

1. 安装依赖

你可以通过命令行来安装包：

使用Flutter：

flutter packages get

或者，你所使用的编辑器可能支持flutter packages get。查阅你的编辑器文档了解更多信息。

1. 导入包

在你的Dart代码中导入：

import 'package:page_indicator/page_indicator.dart';

使用

查看示例文件

或

PageIndicatorContainer(
  child: PageView(
    children: <Widget>[
      Text("1"),
      Text('2'),
      Text('3'),
      Text('4'),
    ],
    controller: controller,
  ),
  align: IndicatorAlign.bottom,
  length: 4,
  indicatorSpace: 20.0,
  padding: const EdgeInsets.all(10),
  indicatorColor: Colors.white,
  indicatorSelectorColor: Colors.blue,
  shape: IndicatorShape.circle(size: 12),
  // shape: IndicatorShape.roundRectangleShape(size: Size.square(12),cornerSize: Size.square(3)),
  // shape: IndicatorShape.oval(size: Size(12, 8)),
}

强制刷新状态

final key = GlobalKey<PageContainerState>();
PageIndicatorContainer(
  key: key,
  // 其他参数...
);

// 强制刷新
key.currentState?.forceRefreshState();

迁移指南

从0.1.x版本迁移到0.2.x版本

PageIndicatorContainer(
  ...
--  size: 12.0,
++  shape: IndicatorShape.circle(size: 12),
)

示例代码

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // 这个widget是你的应用的根
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      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> {
  late PageController controller;

  GlobalKey<PageContainerState> key = GlobalKey();

  [@override](/user/override)
  void initState() {
    super.initState();
    controller = PageController();
  }

  [@override](/user/override)
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  int counter = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        color: Colors.pink,
        child: Container(
          height: 120.0,
          child: PageIndicatorContainer(
            key: key,
            child: PageView(
              children: <Widget>[
                Text('1'),
                Text('2'),
                Text('3'),
                Text('4'),
              ],
              controller: controller,
              reverse: true,
            ),
            align: IndicatorAlign.bottom,
            length: 4,
            indicatorSpace: 10.0,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.refresh),
        tooltip: "强制刷新指示器",
        onPressed: () {
          key.currentState?.forceRefreshState();
        },
      ),
    );
  }
}