如何为Flutter中不同卡片Widget分配递增索引？

问题背景 #

开发Flutter应用时，需要给多个代表独立“餐桌”的卡片Widget添加Tisch 1、Tisch 2这类递增索引标题。尝试在tisch_credentials.dart和主屏幕文件中实现均未成功，现寻求两种思路的可行方案：用Riverpod保存并分配递增索引，或通过列表渲染解决。

方案一：列表渲染（静态/动态生成卡片） #

这是最直接的实现方式，通过列表管理餐桌数据，映射生成带索引的卡片，避免手动重复编写代码导致的索引错误。

1. 修改tisch_credentials.dart

让卡片组件接收外部传入的餐桌编号参数：

import 'package:flutter/material.dart';

class TischCredentials extends StatelessWidget {
  final int tableNumber;

  const TischCredentials({super.key, required this.tableNumber});

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Column(
        children: [
          Row(
            children: [
              Text("Tisch $tableNumber"),
              IconButton(
                icon: const Icon(Icons.delete),
                onPressed: () {},
              ),
              IconButton(onPressed: () {}, icon: const Icon(Icons.check))
            ],
          ),
          const SizedBox(height: 8),
          Container(
            height: 50,
            width: 50,
          ),
        ],
      ),
    );
  }
}

2. 修改主屏幕bestellungen_main_screen.dart

通过列表遍历生成带递增索引的卡片：

import 'package:fabene_bestellungen/widgets/tisch_credentials.dart';
import 'package:flutter/material.dart';

class BestellungenMainScreen extends StatelessWidget {
  // 静态生成2个餐桌索引，也可从数据源动态获取
  final List<int> tableNumbers = List.generate(2, (index) => index + 1);

  BestellungenMainScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Bestellungen'),
      ),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              // 遍历列表生成带索引的卡片和标题
              for (int number in tableNumbers) ...[
                Text('Tisch $number'),
                TischCredentials(tableNumber: number),
              ],
              // 保留原有容器组件
              Container(
                margin: const EdgeInsets.all(10),
                alignment: const Alignment(10, 10),
                width: 100,
                height: 100,
                color: Colors.red,
              ),
              Container(
                margin: const EdgeInsets.all(10),
                width: 100,
                height: 100,
                color: Colors.red,
              ),
            ],
          ),
          Column(
            children: [
              Container(
                width: 100,
                height: 800,
                color: Colors.blue,
              ),
              Container(
                margin: const EdgeInsets.all(10),
                width: 100,
                height: 100,
                decoration:
                    const BoxDecoration(shape: BoxShape.circle, color: Colors.red),
              )
            ],
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Container(
                margin: const EdgeInsets.all(10),
                width: 100,
                height: 200,
                decoration:
                    BoxDecoration(border: Border.all(color: Colors.grey)),
              ),
              Container(
                margin: const EdgeInsets.all(10),
                alignment: const Alignment(10, 10),
                width: 100,
                height: 100,
                color: Colors.red,
              ),
              Container(
                margin: const EdgeInsets.all(10),
                alignment: const Alignment(10, 10),
                width: 100,
                height: 100,
                color: Colors.red,
              ),
              Container(
                margin: const EdgeInsets.all(10),
                width: 100,
                height: 100,
                color: Colors.red,
              ),
            ],
          ),
        ],
      ),
    );
  }
}

方案二：Riverpod管理动态餐桌列表（支持增删） #

如果需要动态添加/删除餐桌，用Riverpod统一管理数据状态，确保UI与数据同步。

1. 创建Riverpod Provider

import 'package:flutter_riverpod/flutter_riverpod.dart';

// 管理餐桌列表的状态Provider，初始包含2个餐桌
final tablesProvider = StateNotifierProvider<TablesNotifier, List<int>>((ref) {
  return TablesNotifier([1, 2]);
});

class TablesNotifier extends StateNotifier<List<int>> {
  TablesNotifier(super.state);

  // 添加新餐桌，索引为当前最大编号+1
  void addTable() {
    state = state.isEmpty 
        ? [...state, 1] 
        : [...state, state.last + 1];
  }

  // 删除指定编号的餐桌
  void removeTable(int tableNumber) {
    state = state.where((number) => number != tableNumber).toList();
  }
}

2. 修改tisch_credentials.dart支持删除操作

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:fabene_bestellungen/provider/tisch_provider.dart';

class TischCredentials extends ConsumerWidget {
  final int tableNumber;

  const TischCredentials({super.key, required this.tableNumber});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Card(
      child: Column(
        children: [
          Row(
            children: [
              Text("Tisch $tableNumber"),
              IconButton(
                icon: const Icon(Icons.delete),
                onPressed: () {
                  ref.read(tablesProvider.notifier).removeTable(tableNumber);
                },
              ),
              IconButton(onPressed: () {}, icon: const Icon(Icons.check))
            ],
          ),
          const SizedBox(height: 8),
          Container(
            height: 50,
            width: 50,
          ),
        ],
      ),
    );
  }
}

3. 修改主屏幕监听状态并添加新增按钮

import 'package:fabene_bestellungen/widgets/tisch_credentials.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:fabene_bestellungen/provider/tisch_provider.dart';

class BestellungenMainScreen extends ConsumerWidget {
  BestellungenMainScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final tables = ref.watch(tablesProvider);
    return Scaffold(
      appBar: AppBar(
        title: const Text('Bestellungen'),
        actions: [
          // 新增餐桌按钮
          IconButton(
            icon: const Icon(Icons.add),
            onPressed: () {
              ref.read(tablesProvider.notifier).addTable();
            },
          ),
        ],
      ),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              // 动态渲染所有餐桌卡片
              for (int number in tables) ...[
                Text('Tisch $number'),
                TischCredentials(tableNumber: number),
              ],
              // 保留原有容器组件
              Container(
                margin: const EdgeInsets.all(10),
                alignment: const Alignment(10, 10),
                width: 100,
                height: 100,
                color: Colors.red,
              ),
              Container(
                margin: const EdgeInsets.all(10),
                width: 100,
                height: 100,
                color: Colors.red,
              ),
            ],
          ),
          Column(
            children: [
              Container(
                width: 100,
                height: 800,
                color: Colors.blue,
              ),
              Container(
                margin: const EdgeInsets.all(10),
                width: 100,
                height: 100,
                decoration:
                    const BoxDecoration(shape: BoxShape.circle, color: Colors.red),
              )
            ],
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Container(
                margin: const EdgeInsets.all(10),
                width: 100,
                height: 200,
                decoration:
                    BoxDecoration(border: Border.all(color: Colors.grey)),
              ),
              Container(
                margin: const EdgeInsets.all(10),
                alignment: const Alignment(10, 10),
                width: 100,
                height: 100,
                color: Colors.red,
              ),
              Container(
                margin: const EdgeInsets.all(10),
                alignment: const Alignment(10, 10),
                width: 100,
                height: 100,
                color: Colors.red,
              ),
              Container(
                margin: const EdgeInsets.all(10),
                width: 100,
                height: 100,
                color: Colors.red,
              ),
            ],
          ),
        ],
      ),
    );
  }
}

方案说明 #

• 方案一适合静态数量的餐桌，实现简单，无需状态管理；
• 方案二适合需要动态增删餐桌的场景，通过Riverpod统一维护数据，保证UI与数据的一致性。

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