Question

我正在尝试实现基本的页面指示器，但是存在指示器颜色变化的问题。

为简单起见，我使用DefaultTabController，因此使用TabController可以使用索引。

树类似于：

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

使用AppBar内的 TapBar窗口小部件，我们可以访问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的功能吗？

Answer 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关键字并编辑了一些生命周期方法，然后它就起作用了。

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

1 个答案: