Flutter Widget 之TabPageSelector

你知道在可滑动页面或向导底部附近垂涎的那一行小点，以表明你在列表中的位置？

幸运的是，你可以通过TabPageSelector轻松地将其添加到你的应用程序中去，TabPageSelector通常与TabBar笑哦部件搭配使用，以获得完整的标签式体验

但你可以很容易地使用TabPageSelector,将指示器添加到你喜欢的任何小部件上

首先，在你的小部件树的某个地方添加一个TabPageSelector小部件,

接下来，提供一个标签控制器来控制你的选择器,

它接受一个告诉Flutter要画多少个点的长度参数

TabPageSelector()

TabController? controller;

void initState() {
    controller = TabController(
        length: 3,
        vsync: this,
    );
}

TabPageSelector(
    controller: controller,
)

每当你的指示点看起来有点儿陈旧时候，在setState内更新控制器的索引以获得全新的外观

setState(() {
    controller.index = 1;
});

默认情况下，TabPageSelector从顶层主体中提取，但如果它找到的值不符合你的要求,你可以随时提一个color和selectedColor

Center(
    child: TabPageSelector(
        color: Colors.pink,
        selectedColor: Colors.purple,
    ),
)

如果这些点太小，可以使用indicatorSize属性来放大或缩小它们

Center(
    child: TabPageSelector(
        indicatorSize: 24.0,
        color: Colors.pink,
        selectedColor: Colors.purple,
    ),
)

就这样，下次，你要创建你自己的标签式体验并且需要指示器点请使用TabPageSelector

如果想了解有关TabPageSelector 的内容，或者关于Flutter的其他功能，请访问flutter.dev

原文翻译自视频：视频地址