Flutter：随机的颜色列表答案

【问题标题】：Flutter: Random a list of colorsFlutter：随机的颜色列表
【发布时间】：2021-11-15 14:45:57
【问题描述】：

我的目标是生成多个不同颜色的 Stickynote，我已经建立了六种不同颜色的列表。我想把它们洗牌。

错误

"message": "无法在初始化程序中访问实例成员 'color'。\n尝试用不同的表达式替换对实例成员的引用",

代码如下：


import 'dart:math';
import 'package:flutter/cupertino.dart';

class Sticky {
  final String note;
  List color = [
    const Color(0xffB85252),
    const Color(0xffB4C6A6),
    const Color(0xffF4ABC4),
    const Color(0xff346751),
    const Color(0xffFFC947),
    const Color(0xff3282B8),
  ];

  var colorItem = (color.toList()..shuffle()).first;

  Sticky({required this.note, required this.color});
}

class StickyNote extends StatefulWidget {
  final color;
  final String note;
  const StickyNote({Key? key, this.color, required this.note})
      : super(key: key);

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

class _StickyNoteState extends State<StickyNote> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 300,
      height: 300,
      color: Sticky.colorItem,
    );
  }
}

【问题讨论】：

为什么，你同时使用required this.color和初始化？
消息很清楚你没有初始化 Sticky 实例，在 statefull 中创建一个方法不是更好吗？

标签： flutter dart flutter-layout

【解决方案1】：

这看起来像一个非常糟糕的飞镖代码，对我来说没有任何意义，但我认为它只是你代码的一部分。

这里有几个错误，我将在下面总结，而且我假设这段代码是部分的，你在示例中所做的使用没有任何意义：

最终颜色不为空，它required

     class StickyNote extends StatefulWidget {
      final Color color;
      final String note;
      const StickyNote({Key? key, required this.color, required this.note})
          : super(key: key);

您将 Sticky 类用作静态类，但任何适当性都是静态的。

一个可行的解决方案是以下一个

import 'dart:math';
import 'package:flutter/cupertino.dart';

class Sticky {
  final String note;
  static List color = [
    const Color(0xffB85252),
    const Color(0xffB4C6A6),
    const Color(0xffF4ABC4),
    const Color(0xff346751),
    const Color(0xffFFC947),
    const Color(0xff3282B8),
  ];

  Sticky({required this.note});
  
  static Color getColorItem() => (color.toList()..shuffle()).first;
}

class StickyNote extends StatefulWidget {
  final Color color;
  final String note;
  const StickyNote({Key? key, required this.color, required this.note})
      : super(key: key);

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

class _StickyNoteState extends State<StickyNote> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 300,
      height: 300,
      color: Sticky.colorItem(),
    );
  }
}

此外，如果你的颜色没有改变，这段代码会更有意义，否则，你需要使用对象而不是类

【讨论】：

我是新手，我删除了 riquired 并在主类中初始化列表。建议对我很重要。 ...谢谢。
我们从某个地方开始 :) 如果它解决了您的问题，请记住将答案标记为正确

【解决方案2】：

你可能想试试这个：

import 'dart:math';
import 'package:flutter/cupertino.dart';

class StickyColors {
 static final List colors = [
    const Color(0xffB85252),
    const Color(0xffB4C6A6),
    const Color(0xffF4ABC4),
    const Color(0xff346751),
    const Color(0xffFFC947),
    const Color(0xff3282B8),
  ];
}

class StickyNote extends StatefulWidget {
  final String note;
  const StickyNote({Key? key, required this.note})
      : super(key: key);

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

class _StickyNoteState extends State<StickyNote> {

 final _random = Random();

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 300,
      height: 300,
      color: StickyColors.colors[_random.nextInt(6)],
    );
  }
}

我并没有实际测试它，但我的应用中有类似的东西。

【讨论】：

IMO API 在这里不好，你可以把 getColor() 的逻辑隐藏在一个方法中，然后忘记它。使用这种颜色，如果您更改 StickyColor 内部的逻辑，您还需要更改视图。而且，这里不需要有状态的小部件
@vincenzopalazzo ，我同意 Statefulwidget，没有必要。这只是因为原始代码使用了它。
使用colors.length代替静态6 StickyColors.colors[_random.nextInt(colors.length)],

【解决方案3】：

如果您只想要一个没有任何状态逻辑的随机便签颜色。您还可以将其转换为一个可以轻松重用的无状态小部件：

class StickNote extends StatelessWidget {

final List colors = [
   const Color(0xffB85252),
   const Color(0xffB4C6A6),
   const Color(0xffF4ABC4),
   const Color(0xff346751),
   const Color(0xffFFC947),
   const Color(0xff3282B8),
];

final _random = Random();

@override
Widget build(BuildContext context) {
  return Container(
    width: 300,
    height: 300,
    color: colors[_random.nextInt(6)],
  );
 }
}

【讨论】：