Android 当TabBarView（）在颤振中滑动时，如何更改Tabs（）的形状？

我一直在尝试在

TabBar（）

中更改

Tabs（）

的形状，我使用

TabBar（）

中的

onTap:（）{}

属性来更改

但问题是，当我在

TabBarView（）

中滑动页面时，我想要相同的功能，所以我也尝试过这样做，但我做不到

在

TabBarView（）

中滑动页面时，我想更改

Tabs（）

的形状

下面是我的代码实现：

import 'package:flutter/material.dart';

class Demo extends StatefulWidget with PreferredSizeWidget {
  @override
  _DemoState createState() => _DemoState();

  @override
  Size get preferredSize => AppBar().preferredSize;
}

class _DemoState extends State<Demo> with SingleTickerProviderStateMixin {
  late TabController _tabController;
  late int _index;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this, initialIndex: 1);
  }

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

  @override
  Widget build(BuildContext context) {
    _index = _tabController.index;

    return SafeArea(
      child: Scaffold(
        body: TabBarView(
          controller: _tabController,
          children: [
            Pages(pageName: "Page 0"),
            Pages(pageName: "Page 1"),
            Pages(pageName: "Page 2"),
          ],
        ),
        appBar: AppBar(
          elevation: 0.0,
          bottom: TabBar(
            onTap: (value) {
              setState(() {
                value = _index;
                print("TabIndex: $value");
              });
            },
            labelColor: Colors.black,
            indicator: BoxDecoration(
              color: Colors.white,
              borderRadius: _index == 0
                  ? BorderRadius.only(topRight: Radius.circular(10.0))
                  : _index == 1
                      ? BorderRadius.only(
                          topLeft: Radius.circular(10.0),
                          topRight: Radius.circular(10.0))
                      : BorderRadius.only(topLeft: Radius.circular(10.0)),
            ),
            controller: _tabController,
            tabs: [
              Tab(text: "Tab0"),
              Tab(text: "Tab1"),
              Tab(text: "Tab2"),
            ],
          ),
        ),
      ),
    );
  }
}

class Pages extends StatelessWidget {
  late final String pageName;
  Pages({required this.pageName});
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Text(
          pageName,
          style: TextStyle(
            color: Colors.black,
            fontWeight: FontWeight.bold,
            fontSize: 60.0,
          ),
        ),
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
类Demo使用PreferredSizeWidget扩展StatefulWidget{
@凌驾
_DemoState createState（）；
@凌驾
Size get preferredSize=>AppBar（）.preferredSize；
}
类_DemoState使用SingleTickerProviderStateMixin扩展状态{
late-TabController\u-TabController；
晚整数指数；
@凌驾
void initState（）{
super.initState（）；
_tabController=tabController（长度：3，vsync:this，初始索引：1）；
}
@凌驾
无效处置（）{
_tabController.dispose（）；
super.dispose（）；
}
@凌驾
小部件构建（构建上下文）{
_index=\tabController.index；
返回安全区(
孩子：脚手架(
正文：选项卡视图(
控制器：\ tab控制器，
儿童：[
页面（页面名称：“第0页”），
页码（页码名称：“第1页”），
页码（页码名称：“第2页”），
],
),
appBar:appBar(
标高：0.0，
底部：选项卡栏(
onTap：（值）{
设置状态（）{
值=_指数；
打印（“TabIndex:$value”）；
});
},
labelColor:Colors.black，
指标：盒子装饰(
颜色：颜色，白色，
边界半径：_索引==0
？仅限边界半径（右上角：半径圆形（10.0））
：_index==1
？仅限边界半径(
左上：半径。圆形（10.0），
右上角：半径。圆形（10.0））
：仅限边界半径（左上角：半径圆形（10.0）），
),
控制器：\ tab控制器，
选项卡：[
选项卡（文本：“选项卡0”），
选项卡（文本：“选项卡1”），
选项卡（文本：“选项卡2”），
],
),
),
),
);
}
}
类页面扩展了无状态小部件{
最后一个字符串pageName；
页面（{required this.pageName}）；
@凌驾
小部件构建（构建上下文）{
返回容器(
儿童：中心(
子：文本(
页码，
样式：TextStyle(
颜色：颜色，黑色，
fontWeight:fontWeight.bold，
字体大小：60.0，
),
),
),
);
}
}

---

我错过了什么？你能告诉我吗

可以通过使用

\tabController

添加

addListners（）

来解决这种混淆

以下是我的答案：

我从

TabBar（）

中删除了

onTap:（）{}

属性，因为它不是必需的，在

initState（）{}

中，我用

\tabController

添加了

addListener（）

方法。这就解决了所有问题，

Tabs（）

样式设置可以从

TabBarView（）收听刷卡功能

导入“包装：颤振/材料.省道”；
类Demo使用PreferredSizeWidget扩展StatefulWidget{
@凌驾
_DemoState createState（）；
@凌驾
Size get preferredSize=>AppBar（）.preferredSize；
}
类_DemoState使用SingleTickerProviderStateMixin扩展状态{
late-TabController\u-TabController；
int _selectedIndex=1；
@凌驾
void initState（）{
super.initState（）；
_tabController=tabController（长度：3，vsync:this，初始索引：1）；
_tabController.addListener（（）{
设置状态（）{
_selectedIndex=\u tabController.index；
});
打印（“当前索引：$_selectedIndex”）；
});
}
@凌驾
无效处置（）{
_tabController.dispose（）；
super.dispose（）；
}
@凌驾
小部件构建（构建上下文）{
返回安全区(
孩子：脚手架(
正文：选项卡视图(
控制器：\ tab控制器，
儿童：[
页面（页面名称：“第0页”），
页码（页码名称：“第1页”），
页码（页码名称：“第2页”），
],
),
appBar:appBar(
标高：0.0，
底部：选项卡栏(
labelColor:Colors.black，
指标：盒子装饰(
颜色：颜色，白色，
边界半径：_selectedIndex==0
？仅限边界半径（右上角：半径圆形（10.0））
：_selectedIndex==1
？仅限边界半径(
左上：半径。圆形（10.0），
右上角：半径。圆形（10.0））
：仅限边界半径（左上角：半径圆形（10.0）），
),
控制器：\ tab控制器，
选项卡：[
选项卡（文本：“选项卡0”），
选项卡（文本：“选项卡1”），
选项卡（文本：“选项卡2”），
],
),
),
),
);
}
}
类页面扩展了无状态小部件{
最后一个字符串pageName；
页面（{required this.pageName}）；
@凌驾
小部件构建（构建上下文）{
返回容器(
儿童：中心(
子：文本(
页码，
样式：TextStyle(
颜色：颜色，黑色，
fontWeight:fontWeight.bold，
字体大小：60.0，
),
),
),
);
}
}

import 'package:flutter/material.dart';

class Demo extends StatefulWidget with PreferredSizeWidget {
  @override
  _DemoState createState() => _DemoState();

  @override
  Size get preferredSize => AppBar().preferredSize;
}

class _DemoState extends State<Demo> with SingleTickerProviderStateMixin {
  late TabController _tabController;
  int _selectedIndex = 1;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this, initialIndex: 1);

    _tabController.addListener(() {
      setState(() {
        _selectedIndex = _tabController.index;
      });
      print("Current Index: $_selectedIndex");
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: TabBarView(
          controller: _tabController,
          children: [
            Pages(pageName: "Page 0"),
            Pages(pageName: "Page 1"),
            Pages(pageName: "Page 2"),
          ],
        ),
        appBar: AppBar(
          elevation: 0.0,
          bottom: TabBar(
            labelColor: Colors.black,
            indicator: BoxDecoration(
              color: Colors.white,
              borderRadius: _selectedIndex == 0
                  ? BorderRadius.only(topRight: Radius.circular(10.0))
                  : _selectedIndex == 1
                      ? BorderRadius.only(
                          topLeft: Radius.circular(10.0),
                          topRight: Radius.circular(10.0))
                      : BorderRadius.only(topLeft: Radius.circular(10.0)),
            ),
            controller: _tabController,
            tabs: [
              Tab(text: "Tab0"),
              Tab(text: "Tab1"),
              Tab(text: "Tab2"),
            ],
          ),
        ),
      ),
    );
  }
}

class Pages extends StatelessWidget {
  late final String pageName;
  Pages({required this.pageName});
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Text(
          pageName,
          style: TextStyle(
            color: Colors.black,
            fontWeight: FontWeight.bold,
            fontSize: 60.0,
          ),
        ),
      ),
    );
  }
}