使用flutter提供程序和removeWhere列表函数删 debugging 误的项?

niwlg2el  于 2023-01-21  发布在  Flutter
关注(0)|答案(1)|浏览(132)

我正在通过以下方式删除发动机型号:

delete(int id) {
    engines.removeWhere((eng) => eng.id == id);
    notifyListeners();
  }
}

这里有趣的部分是,在调试时,带有传递的id的引擎确实被正确地删除了。
但视觉上看到错误的eengine小部件被删除,我不知道为什么?
我在这里把所有的代码,可以很容易地复制/粘贴到著名的main.dart文件!
我是新的扑,甚至更多的供应商包。
也许我做错了什么...

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

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Provider nested model demo',
        theme: ThemeData(
          // This is the theme of your application.
          primarySwatch: Colors.blue,
        ),
        home: ApplicationPage());
  }
}

class ApplicationPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // setup test data which could come from a http service
    var engines = new List<EngineEntity>();
    var engine1 = new EngineEntity(1, "Engine 1");
    var engine2 = new EngineEntity(2, "Engine 2");
    var engine3 = new EngineEntity(3, "Engine 3");
    var engine4 = new EngineEntity(4, "Engine 4");
    var engine5 = new EngineEntity(5, "Engine 5");

    engines.add(engine1);
    engines.add(engine2);
    engines.add(engine3);
    engines.add(engine4);
    engines.add(engine5);

    var newMachineEntity = new MachineEntity(1, "Power x1000", engines);

    return Scaffold(
        appBar: AppBar(title: Text("Machine demo"), elevation: 6),
        body: ChangeNotifierProvider(create: (context) => new MachineModel(newMachineEntity), child: MachineWidget()));
  }
}

class MachineModel extends ChangeNotifier {
  MachineEntity machineEntity;
  List<EngineModel> engines;
  MachineModel(this.machineEntity) {
    engines = this.machineEntity.engines.map((eng) => new EngineModel(eng)).toList();
  }

  String get name => machineEntity.name;
  set name(String value) {
    machineEntity.name = value;
    notifyListeners();
  }

  delete(int id) {
    engines.removeWhere((eng) => eng.id == id);
    notifyListeners();
  }
}

class EngineModel extends ChangeNotifier {
  EngineEntity engine;
  EngineModel(this.engine);

  String get name => engine.name;
  set name(String value) {
    name = value;
    notifyListeners();
  }

  int get id => engine.id;
}

class MachineEntity {
  int id;
  String name;
  List<EngineEntity> engines;
  MachineEntity(this.id, this.name, this.engines);
}

class EngineEntity {
  int id;
  String name;
  EngineEntity(this.id, this.name);
}

class EngineListWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appState = Provider.of<MachineModel>(context);

    return Container(
      child: ListView(
        shrinkWrap: true,
        children: appState.engines.map((eng) => EngineWidget(eng)).toList(),
      ),
    );
  }
}

// Rendered with the EngineModel as data basis
class EngineWidget extends StatelessWidget {
  EngineWidget(this.engineModel);

  final EngineModel engineModel;

  @override
  Widget build(BuildContext context) {
    final appState = Provider.of<MachineModel>(context);

    return Container(
      child: Row(
        children: <Widget>[
          Expanded(flex: 2, child: Text(engineModel.id.toString())),
          Expanded(
              flex: 5,
              child: TextFormField(
                initialValue: engineModel.name,
              )),
          Expanded(
            flex: 3,
            child: FlatButton(onPressed: () => appState.delete(engineModel.id), child: Text("Delete")),
          )
        ],
      ),
    );
  }
}

// Rendered with the MachineModel as data basis
class MachineWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer<MachineModel>(builder: (context, machine, child) {
      return Container(
        child: Column(
          children: <Widget>[
            Container(
                padding: new EdgeInsets.all(5),
                child: TextFormField(
                  initialValue: machine.name,
                  onChanged: (value) => machine.name = value,
                )),
            EngineListWidget(),
          ],
        ),
      );
    });
  }
}

溶液

children: appState.engines.map((eng) => EngineWidget(ValueKey(eng.id), eng)).toList(),

class EngineWidget extends StatelessWidget {
  EngineWidget(this.key, this.engineModel) : super(key: key);
  final Key key;

}

The widget needs a unique key  which is provided by ValueKey and of course my unique database id ;-)
kh212irz

kh212irz1#

你需要为添加到列表中的小部件分配一个键来获得一个标识符。这里发生的事情是List.removeWhere()正确地从列表中删除了这个值,但是由于它会在notifyListeners()时被加载到一个新的列表中,所以不能保证它们会被放置在哪个列表项中。

相关问题