如何在 ListView.Builder 中动态生成特定的小部件？

Question

如何在内部动态生成特定的小部件 ListView.Builder？

我的数据来自 StreamBuilder，这些数据以数字 [1...24] 的形式出现，有时只是数字 [3] 或 [2,4,7,8,11,12] 我正在尝试在 StreamBuilder 中使用 ListView.builder 构建 24 个容器并分配这些值。

我需要创建 24 个容器并从我的 StreamBuilder 中为它们分配我的值。

enter image description here

我需要附件之类的东西。白色数字是额外的，黑色数字是我在我的流中的数据。

Answer 1

复制下面的代码并粘贴到 dartpad 到运行完整示例

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'dart:math';
import 'dart:async';

void main() {
  return runApp(const MaterialApp(home: MyHomePage(slots: 24)));
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  late Stream<List<int>> source;

  @override
  void initState() {
    source = Stream<List<int>>.periodic(const Duration(seconds: 1), (i) {
      final rnd = Random();
      final length = rnd.nextInt(widget.slots);
      return (List.generate(widget.slots - 1, (i) => i + 1)..shuffle())
          .sublist(0, length);
    }).take(1000);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: StreamBuilder<List<int>>(
        stream: source,
        builder: (context, snapshot) {
          final data = snapshot.hasData ? snapshot.data ?? [] : [];
          return Column(
            children: [
              Text('slots: ${widget.slots}'),
              Text('filed: $data'),
              Wrap(
                children: List.generate(widget.slots, (i) {
                  final isActive = data.contains(i);
                  return Container(
                    width: 80,
                    height: 40,
                    margin: const EdgeInsets.all(3),
                    color: Colors.amberAccent,
                    child: Text('$i',
                        style: TextStyle(
                            color: isActive ? Colors.black : Colors.white)),
                  );
                }),
              ),
            ],
          );
        },
      ),
    );
  }
}

如何在 ListView.Builder 中动态生成特定的小部件？

How generate specific widget dynamically inside ListView.Builder?

dart

flutter