如何從顏色串列中為容器分配顏色？

如何從顏色串列中為我的行分配顏色 這是代碼。

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,
        ),
      ),
    );
  }
}

我想分配第一行，串列中的第一種顏色，串列中的第二行第二種顏色等等。 我想在我的應用程式中實作此圖表的功能 這基本上是光纖顏色編碼的顏色編碼圖表。我將在矩陣頂部添加一行，該行將為圖表的每一列提供列名。

uj5u.com熱心網友回復：

您可以使用index串列的 來從顏色串列中選擇顏色。在.map()方法中，您無法訪問indexso 而是使用.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,

uj5u.com熱心網友回復：

目前，您將容器的顏色設定為陣列中的第一種顏色。

color: manyColors[0],

您將獲得每個容器的唯一編號作為columns地圖內的變數。您所要做的就是將唯一編號映射到顏色陣列所需的索引。

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

標籤：数组 扑 镖 多维数组 动态数组

上一篇：Flutter在第二個螢屏上沒有互動的時??間后導航回到主螢屏

下一篇：為什么readLineSync在隔離中不起作用