onDismissed 在 flutter 中改变了小部件的颜色

Question

我的 Dismissible Widget 有问题。当您运行此代码时：

import 'dart:math';

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('appbar'),
        ),
        body: const MyStatefulWidgetState(),
      ),
    );
  }
}

class MyStatefulWidgetState extends StatefulWidget {
  const MyStatefulWidgetState({Key? key}) : super(key: key);

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

class _MyStatefulWidgetState extends State<MyStatefulWidgetState> {
  final List<String> items = List<String>.generate(10, (i) => "Item ${i + 1}");

  @override
  Widget build(BuildContext context) {
    return ListView.separated(
      separatorBuilder: (BuildContext context, int index) => const Divider(
        height: 2,
      ),
      itemCount: items.length,
      itemBuilder: (context, index) {
        final item = items[index];
        return Dismissible(
          key: Key(item),
          onDismissed: (DismissDirection direction) {
            //Remove the item from the data source.
            setState(() {
              items.removeAt(index);
            });
          },
          child: Container(
            height: 90,
            alignment: Alignment.centerLeft,
            child: Padding(
              padding: const EdgeInsets.all(12.0),
              child: Text(item),
            ),
            color: UniqueColorGenerator.getColor(),
          ),
        );
      },
    );
  }
}

class UniqueColorGenerator {
  static Random random = Random();
  static Color getColor() {
    return Color.fromARGB(
        255, random.nextInt(255), random.nextInt(255), random.nextInt(255));
  }
}

并且当您关闭容器时，从列表中删除容器后，所有容器的颜色都会改变（例如重置应用程序或热重新加载并获得新颜色）

1 - 为什么会这样？

2 - 我该如何解决这个问题？所以当我关闭容器时，其他容器的颜色保持相同的颜色？

谢谢

Answer 1

我对带键的 Flutter 优化不太了解，所以我不确定为什么你的键什么都不做但是根据我的理解，发生这种情况的原因是setState 调用。

setState 将导致构建函数再次为运行，这反过来意味着 itemBuilder 函数必须再次为运行，这意味着您要为每个容器生成一种新颜色计时 itemBuilder 函数运行s（尽管它用于同一个项目），它解释了您所看到的行为。

现在要改变它，您可以采用不同的方式，此处描述了其中两种方式：

选项 1 - 根据项目生成颜色

Random 构造函数采用可选种子，允许您每次都重现一组给定的随机值。如果您使用项目的 hashCode，您仍然会为每个项目生成一个有效的随机颜色：

class UniqueColorGenerator {
  static Color getColor(String item) {
    final random = Random(item.hashCode);
    
    return Color.fromARGB(
        255, random.nextInt(255), random.nextInt(255), random.nextInt(255));
  }
}

然后将其用于 color: UniqueColorGenerator.getColor(item), 的容器颜色。这种方法的优点是（至少使用字符串作为项目）颜色即使在重新启动之间也是一致的。对于更复杂的对象，请确保覆盖 the hashCode getter!

选项 2 - 使颜色成为项目状态的一部分

为确保您不会丢失关于哪个项目有什么颜色的信息，请将其与项目一起存储。

首先，创建一个项目 class 将我们的数据整齐地放在一起：

class Item {
  final String text;
  final Color color;

  Item(this.text, this.color);
}

接下来，更新项目的生成以利用它 class:

final List<Item> items = List<Item>.generate(
  10,
  (i) => Item("Item ${i + 1}", UniqueColorGenerator.getColor())
);

最后，更新它的用法（所以 Container 的颜色变成 item.color，之前的 item 现在是 item.text）。

使用这种方法，颜色不会在整个重新启动过程中保留。

onDismissed 在 flutter 中改变了小部件的颜色

onDismissed in flutter changed color of widget

dart

flutter

选项 1 - 根据项目生成颜色

选项 2 - 使颜色成为项目状态的一部分