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

【问题标题】：How do I assign colors to containers from a list of colors?如何从颜色列表中为容器分配颜色？
【发布时间】：2022-01-08 08:35:14
【问题描述】：

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

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 这基本上是光纤颜色编码的颜色编码图表。我将在矩阵顶部添加一行，其中包含图表每一列的列名。

【问题讨论】：

标签： arrays flutter dart multidimensional-array dynamic-arrays

【解决方案1】：

您可以使用列表的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,

【讨论】：

我已经尝试过了，但它在控制台 lib/main.dart:84:37 中显示此错误：错误：此表达式的类型为“void”，无法使用。 myRowChildren = numbers.asMap().forEach( 它说 .forEach 的类型是 void，所以它的值不能被使用。
是的，我的错。我现在已经编辑了解决方案。您可以向它添加我们从forEach() 获得的小部件，而不是为myRowChildren 分配数字
感谢您的帮助。你能再告诉我一件事吗？如何从用户那里获取所有颜色的值并将其传递到我的图表中？以及如何只显示一个容器，比如用户只想找到 45 的颜色。我该怎么做？
您可以创建一个表单来获取用户的颜色值。创建变量columnNumber并根据用户更新其值并显示相同编号的列。当用户输入另一个值然后调用setState()

【解决方案2】：

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

color: manyColors[0],

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

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

【讨论】：

颜色：manyColors[(nr -1) % manyColors.length],
这对我有用。