Flutter中如何根据选中标签项返回对应Container组件？

你的代码存在两个核心问题：

1. 错误使用??运算符：??是空值合并运算符，仅用于处理null值场景，不能用来做条件分支判断。
2. 错误的条件写法：current = 0是赋值操作，不是条件判断（正确写法应为current == 0），这直接导致了语法错误。

下面提供两种正确的实现方式，以及完整的NotificationsView组件代码：

方法一：使用switch-case分支判断 #

通过switch语句根据current的值返回对应组件，逻辑清晰，适合每个组件差异较大的场景：

Widget _getCurrentContent() {
  switch(current) {
    case 0:
      return Container(
        margin: const EdgeInsets.only(top: 30),
        height: MediaQuery.of(context).size.height * 1,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const SizedBox(height: 10),
            Text(
              items[current],
              style: GoogleFonts.laila(
                  fontWeight: FontWeight.w500,
                  fontSize: 30,
                  color: Colors.deepPurple),
            ),
          ],
        ),
      );
    case 1:
      return const Center(child: Text('hello'));
    case 2:
      return const Center(child: Text('Messages Content'));
    case 3:
      return const Center(child: Text('Customers Content'));
    default:
      return const SizedBox.shrink();
  }
}

方法二：组件列表映射 #

将每个标签对应的组件存入列表，通过current索引直接获取，代码更简洁，适合组件结构规整的场景：

final List<Widget> _contentWidgets = [
  Container(
    margin: const EdgeInsets.only(top: 30),
    height: MediaQuery.of(context).size.height * 1,
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        const SizedBox(height: 10),
        Text(
          items[0],
          style: GoogleFonts.laila(
              fontWeight: FontWeight.w500,
              fontSize: 30,
              color: Colors.deepPurple),
        ),
      ],
    ),
  ),
  const Center(child: Text('hello')),
  const Center(child: Text('Messages Content')),
  const Center(child: Text('Customers Content')),
];

使用时直接调用_contentWidgets[current]即可。

完整NotificationsView组件代码 #

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class NotificationsView extends StatefulWidget {
  const NotificationsView({super.key});

  @override
  State<NotificationsView> createState() => _NotificationsViewState();
}

class _NotificationsViewState extends State<NotificationsView> {
  final List<String> items = [
    "All",
    "Jobs",
    "Messages",
    "Customers",
  ];
  int current = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Notifications')),
      body: Column(
        children: [
          // 自定义标签栏
          SizedBox(
            height: 60,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: items.length,
              itemBuilder: (context, index) {
                return GestureDetector(
                  onTap: () {
                    setState(() {
                      current = index;
                    });
                  },
                  child: Container(
                    padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 15),
                    margin: const EdgeInsets.symmetric(horizontal: 5),
                    decoration: BoxDecoration(
                      color: current == index ? Colors.deepPurple[100] : Colors.transparent,
                      borderRadius: BorderRadius.circular(20),
                    ),
                    child: Center(
                      child: Text(
                        items[index],
                        style: GoogleFonts.laila(
                          fontWeight: current == index ? FontWeight.w600 : FontWeight.w400,
                          color: current == index ? Colors.deepPurple : Colors.grey,
                        ),
                      ),
                    ),
                  ),
                );
              },
            ),
          ),
          // 内容区域
          Expanded(
            child: _getCurrentContent(),
            // 如果用方法二，替换成：child: _contentWidgets[current],
          ),
        ],
      ),
    );
  }

  Widget _getCurrentContent() {
    switch(current) {
      case 0:
        return Container(
          margin: const EdgeInsets.only(top: 30),
          height: MediaQuery.of(context).size.height * 1,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const SizedBox(height: 10),
              Text(
                items[current],
                style: GoogleFonts.laila(
                    fontWeight: FontWeight.w500,
                    fontSize: 30,
                    color: Colors.deepPurple),
              ),
            ],
          ),
        );
      case 1:
        return const Center(child: Text('hello'));
      case 2:
        return const Center(child: Text('Messages Content'));
      case 3:
        return const Center(child: Text('Customers Content'));
      default:
        return const SizedBox.shrink();
    }
  }
}

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