Flutter build方法中使用三元运算符控制TabBar按传入参数显隐

问题原因与解决方案 #

你当前无法识别tabbarenable变量是两个原因导致的：

1. 你的CategoryViewDetail组件没有把tabbarenable声明为类属性，构造函数没有绑定参数到类
2. State类中访问父组件传入的参数，必须通过widget.参数名的形式调用

完整实现代码 #

import 'package:flutter/material.dart';

class CategoryViewDetail extends StatefulWidget {
  // 先把tabbarenable声明为类属性
  const CategoryViewDetail({Key? key, required this.tabbarenable})
      : super(key: key);
  final bool tabbarenable;

  @override
  State<CategoryViewDetail> createState() => _CategoryViewDetailState();
}

class _CategoryViewDetailState extends State<CategoryViewDetail> {
  late Future<Categories> _futureCategories;

  @override
  Widget build(BuildContext context) {
    List<Tab> tabs = <Tab>[];

    return FutureBuilder<Categories>(
      future: _futureCategories,
      builder: (BuildContext context, AsyncSnapshot<Categories> snapshot) {
        if (snapshot.hasData) {
          final name = snapshot.data?.data;
          var filteredList = name
              ?.where((item) =>
                  item.name == 'Spor'
                  // 这里补全你原来剩余的筛选条件
              ).toList();

          // 仅当tabbarenable为true时组装tab数组，减少无用性能消耗
          if (widget.tabbarenable) {
            for (int i = 0; i < filteredList!.length; i++) {
              tabs.add(
                Tab(
                  child: Text(
                    ' ${filteredList[i].name}',
                    style: const TextStyle(
                        fontWeight: FontWeight.w700,
                        fontSize: 15.0,
                        fontFamily: 'Manrope',
                        color: Colors.black54),
                  ),
                ),
              );
            }
          }

          // 核心用三元运算符控制TabBar显隐
          return DefaultTabController(
            length: widget.tabbarenable ? tabs.length : 0,
            child: Scaffold(
              appBar: AppBar(
                // 为true时显示TabBar，为false时bottom传null即可隐藏
                bottom: widget.tabbarenable ? TabBar(
                  tabs: tabs,
                  // 这里补全你自己的TabBar样式配置
                ) : null,
              ),
              body: const TabBarView(
                // 这里补全你自己的页面内容
              ),
            ),
          );
        }
        // 补全加载状态、错误状态的返回逻辑即可
        return const Center(child: CircularProgressIndicator());
      },
    );
  }
}

如果你是把TabBar放在页面其他位置而非AppBar的bottom属性里，也可以用下面的写法隐藏：

// 不需要显示时返回空占位组件即可
widget.tabbarenable ? TabBar(tabs: tabs) : const SizedBox.shrink()

内容的提问来源于stack exchange，提问作者gegentierversuche