Flutter：如何在 TabBar 中禁用特定选项卡

Question

我正在尝试禁用 TabBar 中的特定选项卡。 例如，如果索引为 1，我想禁用索引 1 中的选项卡。我不能这样做。

这是 TabBar 示例

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>    with SingleTickerProviderStateMixin {
late  TabController _tabController;

  @override
  void initState() {
    _tabController = TabController(length: 2, vsync: this);
    super.initState();
  }
  
  
    void changeScheduleTabbar(int index) {
      print(index);
     if(index==0){
      setState(() {
         _tabController.index = index >= 0 && index < 2 ? index : 0;
      });  
     } 
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:const Text(
          'Tab bar',
        ),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: [
            Container(
              height: 45,
              decoration: BoxDecoration(
                color: Colors.grey[300],
                borderRadius: BorderRadius.circular(
                  25.0,
                ),
              ),
              child: TabBar(
                controller: _tabController,
                indicator: BoxDecoration(
                  borderRadius: BorderRadius.circular(
                    25.0,
                  ),
                  color: Colors.green,
                ),
                onTap: (int index) =>changeScheduleTabbar(index), //<<=========== control Tab change here 
                labelColor: Colors.white,
                unselectedLabelColor: Colors.black,
                tabs: const[
                  //<<=== first tab 
                  Tab(
                    text: 'Place Bid',
                  ),

                  //<<=== second tab
                  Tab(
                    text: 'Buy Now',
                  ),
                ],
              ),
            ),
            // tab bar view here
            Expanded(
              child: TabBarView(
                controller: _tabController,
                children:const [
                  // first tab bar view widget 
                  Center(
                    child: Text(
                      'Place Bid',
                      style: TextStyle(
                        fontSize: 25,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                  ),

                  // second tab bar view widget
                  Center(
                    child: Text(
                      'Buy Now',
                      style: TextStyle(
                        fontSize: 25,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

问题出在哪里？ 我该如何解决这个问题？

Answer 1

问题是您试图直接将索引分配给_tabController.index 。

相反，对于某个条件，您应该像这样分配选项卡 controller 的前一个索引： tabController.index = index == 1? tabController.previousIndex: index; tabController.index = index == 1? tabController.previousIndex: index;

这是带有三个选项卡的整个代码，以便于理解：（为了更好的组织，我对代码进行了一些更新）

import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;

  List<Tab> tabs = const [
    Tab(text: 'Place Bid'),
    Tab(text: 'Buy Now'),
    Tab(text: 'Sell Now'),
  ];

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

  void onTap(int index) {
    setState(() {
      _tabController.index = index == 1 ? _tabController.previousIndex : index;
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Tab bar'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: [
            Container(
              height: 45,
              decoration: BoxDecoration(
                color: Colors.grey[300],
                borderRadius: BorderRadius.circular(25.0),
              ),
              child: TabBar(
                controller: _tabController,
                indicator: BoxDecoration(
                  borderRadius: BorderRadius.circular(25.0),
                  color: Colors.green,
                ),
                onTap: (int index) => onTap(index),
                labelColor: Colors.white,
                unselectedLabelColor: Colors.black,
                tabs: tabs,
              ),
            ),
            Expanded(
              child: TabBarView(
                controller: _tabController,
                children: const [
                  BidTab(),
                  BuyTab(),
                  SellTab(),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class SellTab extends StatelessWidget {
  const SellTab({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text(
        'Sell Now',
        style: TextStyle(
          fontSize: 25,
          fontWeight: FontWeight.w600,
        ),
      ),
    );
  }
}

class BuyTab extends StatelessWidget {
  const BuyTab({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text(
        'Buy Now',
        style: TextStyle(
          fontSize: 25,
          fontWeight: FontWeight.w600,
        ),
      ),
    );
  }
}

class BidTab extends StatelessWidget {
  const BidTab({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text(
        'Place Bid',
        style: TextStyle(
          fontSize: 25,
          fontWeight: FontWeight.w600,
        ),
      ),
    );
  }
}