Question

即使我点击TabBar，我也希望阻止该标签移动。

TabBar(
        controller: this._controller,
        tabs: <Widget>[
          new Tab(
            text: "A",
          ),
          new Tab(
            text: "B",
          ),
          new Tab(
            text: "C",
          ),
        ])

Answer 1

只需将TabBar包裹在IgnorePointer中即可。

Answer 2

我认为您必须在列表选项卡上添加列表器，然后再次将索引更改为0。在这种情况下，我们需要添加控制器，然后可以通过它设置索引。

    class TabBarDemoWidget extends State<TabBarDemo> with TickerProviderStateMixin{


  @override
  Widget build(BuildContext context) {
    int _tabIndex = 0;

    var tab = TabController(
      initialIndex: 0,
      length: 3,
      vsync: this
    );

    void _handleTabSelection(){
      setState(() {
              tab.index = _tabIndex;
            });
        }
    tab.addListener(_handleTabSelection);




    return DefaultTabController(
        length: 3,
        initialIndex: 0,
        child: TabBar(
               labelColor: Colors.teal,
               controller: tab,
               tabs: [

                GestureDetector(
                  child:Tab(
                  icon: 
                  Icon(
                    Icons.directions_car)) ,
                  onTap: (){
                    _tabIndex = 0;
                  },
              ),GestureDetector(
                  child:Tab(
                  icon: Icon(Icons.directions_car)) ,
                  onTap: (){
                    _tabIndex = 0;
                  },
              ),GestureDetector(
                  child:Tab(
                  icon: Icon(Icons.directions_car)) ,
                  onTap: (){
                    _tabIndex = 0;
                  },
              )
              ],
            ),
      );
  }
}

Answer 3

如果要将TabBar嵌入AppBar的底部，则需要实现PreferredSizeWidget。这很容易实现：

class ReadOnlyTabBar extends StatelessWidget implements PreferredSizeWidget {
  final TabBar child;

  const ReadOnlyTabBar({Key key, @required this.child}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return IgnorePointer(child: child);
  }

  @override Size get preferredSize => this.child.preferredSize;
}

Answer 4

TabBar具有功能onTap，您可以执行以下操作以在点击时不更改标签。

TabBar(
            onTap: (index){
              setState(() {
               _tabController.index = 0; 
              });
            },
            controller: _tabController,
          ),

Answer 5

@Rob Lyndon给出了完美的答案。

这是另一个类似的例子。但是在此我们不会再创建一个类

Scaffold(
    appBar: AppBar(
    bottom: PreferredSize(
      preferredSize:
          Size.fromHeight(_kTextAndIconTabHeight + indicatorWeight),
      child: IgnorePointer(
        child: TabBar(
        ),
      ),
    ),
  ),
);

Answer 6

我有一个更优雅的解决方案：

TabBar(
      onTap: (index){
         _controller.index = _controller.previousIndex;
      },

Answer 7

将手势检测器传递到要禁用的选项卡。将onTap设置为null可禁用点击。请看下面提供的示例！

TabBar(
          tabs: [
            Tab(child: Text("15")), //enabled
            Tab(child: GestureDetector(child: Text("16"), onTap: null), //disabled
          ],
        ),

在Flutter的TabBar上禁用onTapped

7 个答案: