如何在没有 TabBar 小部件的情况下在 DefaultTabController 中创建页面指示器？答案

【问题标题】：How can I create Page Indicator inside DefaultTabController without TabBar Widget?如何在没有 TabBar 小部件的情况下在 DefaultTabController 中创建页面指示器？
【发布时间】：2019-04-12 12:54:42
【问题描述】：

我正在尝试实现一个基本的页面指示器，但改变指示器颜色时遇到问题。

为了简单起见，我使用了 DefaultTabController，所以有了 TabController 我可以使用索引。

树是这样的：

Scaffold => Stack => DefaultTabController,
PageIndicator(bottom/center),
FlatButton(bottom/left),
FlatButton(bottom/right);

使用 TapBar Widget，在 AppBar 内部，我们可以访问 onTap 功能，我已经使用了类似的概念，但这是用于演示屏幕，所以 我不会使用 AppBar。

如您所见，指示器不在 DefaultTabController 中，所以这是我们应该注意的一点。

这是我上次尝试的代码：

指标小部件：

    Widget buildPageIndicator() {
    return Row(
      children: <Widget>[
        Container(
          width: 12,
          height: 12,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: _tabController.index == 0 ? Colors.white : Colors.black38,
          ),
        ),
        SizedBox(
          width: 12,
        ),
        Container(
          width: 12,
          height: 12,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: _tabController.index == 1 ? Colors.white : Colors.black38,
          ),
        ),
      ],
    );
  }

构建方法：

    @override
  Widget build(BuildContext context) {
    final Size size = MediaQuery.of(context).size;
    final int indicatorWidth = 12 * (this.pages.length + 1);
    return Stack(
      fit: StackFit.expand,
      children: <Widget>[
        DefaultTabController(
          length: 2,
          child: TabBarView(
            controller: _tabController,
            children: this.pages,
          ),
        ),
        Positioned(
          bottom: 16,
          left: 16,
          child: FlatButton(
            onPressed: () {},
            child: Text(
              'Language',
              style: buttonTextStyle,
            ),
          ),
        ),
        Positioned(
          bottom: 16,
          right: 16,
          child: FlatButton(
            onPressed: () {
              _tabController.animateTo(1);
            },
            child: Text(
              'Next',
              style: buttonTextStyle,
            ),
          ),
        ),
        Positioned(
          bottom: 34,
          left: size.width / 2 - indicatorWidth / 2,
          child: Container(
            height: 12,
            width: indicatorWidth.toDouble(),
            child: buildPageIndicator(),
          ),
        )
      ],
    );
  }

如何为此进行动态着色？或者我怎样才能得到：

TabBar => OnTap(){}

TabController 的功能？

【问题讨论】：

标签： dart flutter

【解决方案1】：

答案是：

TabController _tabController;
  int activePage = 0;

  final List<Widget> pages = <Widget>[....Page Widgets];

  void tabIndexListener() {
    setState(() {
      this.activePage = _tabController.index;
    });
  }

  @override
  void initState() {
    _tabController = TabController(length: this.pages.length, vsync: this);
    _tabController.addListener(tabIndexListener);
    super.initState();
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  Widget _buildPageIndicator() {
    return Row(
      children: <Widget>[
        Container(
          width: 12,
          height: 12,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: activePage == 0 ? Colors.white : Colors.black38,
          ),
        ),
        SizedBox(
          width: 12,
        ),
        Container(
          width: 12,
          height: 12,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: activePage == 1 ? Colors.white : Colors.black38,
          ),
        ),
      ],
    );
  }

在此之前，我的 tabController 是静态的，我删除了 static 关键字并编辑了一些生命周期方法并且它起作用了。

【讨论】：