我被告知第 25 行代码包含一个问题，其中使用了随机颜色的 setState()。帮助确定问题

Question

原始任务听起来像：

The application should: display the text "Hey there" in the middle of the screen and after tapping anywhere on the screen a background color should be changed to a random color. You can also add any other feature to the app - that adds bonus points Please do not use any external libraries for color generation

我的解决方案（GitHub）：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: RandomBackgroundColorWidget(),
    );
  }
}

class RandomBackgroundColorWidget extends StatefulWidget {
  @override
  _RandomBackgroundColorWidget createState() => _RandomBackgroundColorWidget();
}

class _RandomBackgroundColorWidget extends State<RandomBackgroundColorWidget> {
  int _colorIndex = 0xFF42A5F5;

  void _randomColorIndexGenerator() {
    final _rng = new Random();
    setState(() => {_colorIndex = (_rng.nextInt(0xFFFFFF) + 0xFF000000)});
  }

  @override
  Widget build(BuildContext context) {
    return Stack(children: [
      Material(
        color: Color(_colorIndex),
        child: Center(
          child: Text("Hey there"),
        ),
      ),
      GestureDetector(
        onTap: () => _randomColorIndexGenerator(),
      ),
    ]);
  }
}

在审查我的测试任务时，面试官说 第 25 行代码包含一个问题。

setState(() => {_colorIndex = (_rng.nextInt(0xFFFFFF) + 0xFF000000)});

他评论道：

"It is working in a way that is not intended by you."

帮助识别第 25 行代码中的问题。

Answer 1

您不小心组合了两种在 Dart 中声明函数的方法：箭头运算符 => 和花括号 {}。

第 25 行应该是：

setState(() => _colorIndex = _rng.nextInt(0xFFFFFF) + 0xFF000000);

没有多余的大括号。

Answer 2

我找不到你提到的错误，但我建议你在分配默认值时始终使用 init 状态。

换个方式

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: RandomBackgroundColorWidget(),
    );
  }
}

class RandomBackgroundColorWidget extends StatefulWidget {
  @override
  _RandomBackgroundColorWidget createState() => _RandomBackgroundColorWidget();
}

class _RandomBackgroundColorWidget extends State<RandomBackgroundColorWidget> {
  Color _color;

  @override
  void initState() {
    _color = Colors.white;
    super.initState();
  }

  void getrandomColor() {
    setState(() {
      _color = Colors.primaries[Random().nextInt(Colors.primaries.length)];
    });
  }

  @override
  Widget build(BuildContext context) {
    return Stack(children: [
      Material(
        color: _color,
        child: Center(
          child: Text("Hey there"),
        ),
      ),
      GestureDetector(
        onTap: getrandomColor,
      ),
    ]);
  }
}

Answer 3

问题是语法错误。使用 setState() => 时，您不需要 {}

setState(() {_colorIndex = (_rng.nextInt(0xFFFFFF) + 0xFF000000)});

或

setState(() => _colorIndex = (_rng.nextInt(0xFFFFFF) + 0xFF000000));

Answer 4

问题出在 nextInt 函数中。

Flutter 接受最多 0xFFFFFFFF 的颜色代码生成，其中第一对数字需要用于不透明度级别，其他对需要用于 RGB 级别

nextInt 函数生成范围内的随机数，但不包括传递的数字。例如，nextInt(3) 将随机生成 0,1 或 2，但不会生成 3。

原来的应用生成所有随机颜色（从 0x0 到 0xFFFFFE）除了最后一个 - 0xFFFFFF

因此，第 25 行应该如下所示，以便生成所有可能的颜色。

setState(() => _colorIndex = (_rng.nextInt(0x1000000) + 0xFF000000));

我被告知第 25 行代码包含一个问题，其中使用了随机颜色的 setState()。帮助确定问题

I was told that 25th line of code contains an issue where setState() with random color being used. Help identify an issue

random

setstate

dart

flutter