如何从颜色列表中为容器分配颜色？

Question

如何从颜色列表中为我的行分配颜色 这是代码。

import 'dart:math';

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Rows and Columns Matrix'),
    );
  }
}

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

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    List<Color> manyColors = [
      Colors.red,
      Colors.green,
      Colors.blue,
      Colors.yellow,
      Colors.brown,
      Colors.purple,
      Colors.orange,
      Colors.pink
    ];


    List<Widget> myRowChildren = [];
    List<List<int>> numbers = [];
    List<int> columnNumbers = [];
    int z = 1;
    int numberOfTubes = 18;
    Color concol = Colors.red;

    for (int i = 0; i < numberOfTubes; i++) {
      int fibersPerTube = 24;
      for (int y = 0; y < fibersPerTube; y++) {
        int currentNumber = z + y;
        columnNumbers.add(currentNumber);
      }
      z += fibersPerTube;

      numbers.add(columnNumbers);
      columnNumbers = [];
    }

    myRowChildren = numbers
        .map(
          (columns) => Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: columns.map((nr) {


              return Container(
                padding: EdgeInsets.all(2),
                decoration: BoxDecoration(
                    color: manyColors[0],
                    border: Border.all(
                      color: Colors.black,
                      width: 1,
                    )),
                child: Text(
                  nr.toString(),
                ),
              );
            }).toList(),
          ),
        )
        .toList();

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: myRowChildren,
        ),
      ),
    );
  }
}

我想分配第一行，列表中的第一种颜色，第二行列表中的第二种颜色等等。 I want to achieve this chart's functionality in my app 这基本上是光纤颜色编码的颜色编码图表。我将在矩阵的顶部添加一行，图表的每一列都有列名。

Answer 1

当前，您正在将容器的颜色设置为数组中的第一种颜色。

color: manyColors[0],

您将获得每个容器的唯一编号作为地图内的变量 columns。您所要做的就是将唯一编号映射到颜色数组的所需索引。

color: manyColors[(columns % manyColors.lenght)],

Answer 2

您可以使用列表的 index 从颜色列表中选择颜色。在 .map() 方法中，您无法访问 index，因此请改用 .asMap()。像这样：

    numbers
        .asMap().forEach(
          (index, columns) => myRowChildren.add(Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: columns.map((nr) {
              return Container(
                padding: EdgeInsets.all(2),
                decoration: BoxDecoration(
                    color: manyColors[index],
                    border: Border.all(
                      color: Colors.black,

如何从颜色列表中为容器分配颜色？

How do I assign colors to containers from a list of colors?

arrays

flutter

dart

multidimensional-array

dynamic-arrays