Question

我正在尝试更新ListView中的列表，只有当我转到列表的最后一个元素并执行更新时，要么添加项目，删除它，转到另一个页面并返回，列表变得不完整而没有显示列表中的第一项。

下面是一个代码，其中显示更新列表后它是不完整的

import 'package:flutter/material.dart';
import 'dart:ui' as ui;

void main() {
  runApp(new MyApp());
}

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

class CategoriaPage extends StatefulWidget {
  @override
  CategoriaPageState createState() => new CategoriaPageState();
}

class CategoriaPageState extends State<CategoriaPage>{
  Color azulAppbar = new Color(0xFF26C6DA);
  List<Widget> listCategories = [];
  List listaDB = [];

  @override
  void initState() {
    setState(() {
      this.listaDB = 
        [
          [{'category': 'foo01', 'id': 1}],
          [{'category': 'foo02', 'id': 2}],
          [{'category': 'foo03', 'id': 3}],
          [{'category': 'foo04', 'id': 4}],
          [{'category': 'foo05', 'id': 5}],
          [{'category': 'foo06', 'id': 6}],
          [{'category': 'foo07', 'id': 7}],
          [{'category': 'foo08', 'id': 8}],
          [{'category': 'foo09', 'id': 9}],
          [{'category': 'foo10', 'id': 10}],
          [{'category': 'foo11', 'id': 11}],
          [{'category': 'foo12', 'id': 12}],
          [{'category': 'foo13', 'id': 13}],
          [{'category': 'foo14', 'id': 14}],
          [{'category': 'foo15', 'id': 15}],
          [{'category': 'foo16', 'id': 16}],
          [{'category': 'foo17', 'id': 17}],
          [{'category': 'foo18', 'id': 18}],
          [{'category': 'foo19', 'id': 19}],
          [{'category': 'foo20', 'id': 20}],
          [{'category': 'foo21', 'id': 21}],
          [{'category': 'foo22', 'id': 22}],
          [{'category': 'foo23', 'id': 23}],
          [{'category': 'foo24', 'id': 24}]
        ];
    });
  }

  @override
  Widget build(BuildContext context) {

    List<Widget> buildListCategories(List list) {
      this.listCategories = [];

      for(var i in list) {
        var id = i[0]['id'];
        var category = i[0]['category'];

        this.listCategories.add(
          new ItemCategory(
            key: new ObjectKey(i[0]),
            id: id,
            category: category,
            onPressed: () async {
              setState(() {
                this.listaDB = 
                [
                  [{'category': 'foo01', 'id': 1}],
                  [{'category': 'foo02', 'id': 2}],
                  [{'category': 'foo03', 'id': 3}],
                  [{'category': 'foo04', 'id': 4}],
                  [{'category': 'foo05', 'id': 5}],
                  [{'category': 'foo06', 'id': 6}],
                  [{'category': 'foo07', 'id': 7}],
                  [{'category': 'foo08', 'id': 8}],
                  [{'category': 'foo09', 'id': 9}],
                  [{'category': 'foo10', 'id': 10}],
                  [{'category': 'foo11', 'id': 11}],
                  [{'category': 'foo12', 'id': 12}],
                  [{'category': 'foo13', 'id': 13}],
                  [{'category': 'foo14', 'id': 14}],
                  [{'category': 'foo15', 'id': 15}],
                  [{'category': 'foo16', 'id': 16}],
                  [{'category': 'foo17', 'id': 17}],
                  [{'category': 'foo18', 'id': 18}],
                  [{'category': 'foo19', 'id': 19}],
                  [{'category': 'foo20', 'id': 20}],
                  [{'category': 'foo22', 'id': 22}],
                  [{'category': 'foo23', 'id': 23}],
                  [{'category': 'foo24', 'id': 24}]
                ];
              });
            }
          )
        );  
      }
      return this.listCategories;
    }

    return new Scaffold( 
      appBar: new AppBar(
        title: new Text('Categorias'),
        backgroundColor: azulAppbar,
      ),
      body: new ListView(
        padding: new EdgeInsets.only(top: 8.0, right: 0.0, left: 0.0),
        children: buildListCategories(this.listaDB)
      )
    );
  }
}

class ItemCategory extends StatefulWidget {

  final int id;
  final String category;
  final VoidCallback onPressed;

  ItemCategory({
    Key key,
    this.id,
    this.category,
    this.onPressed}) : super(key: key);

  @override
  ItemCategoryState createState() => new ItemCategoryState();
}

class ItemCategoryState extends State<ItemCategory> with TickerProviderStateMixin {
  ItemCategoryState();

  AnimationController _controller;
  Animation<double> _animation;
  double flingOpening;
  bool startFling = true;

  void initState() {
    super.initState();
    _controller = new AnimationController(duration: 
      const Duration(milliseconds: 246), vsync: this);

    _animation = new CurvedAnimation(
      parent: _controller,
      curve: new Interval(0.0, 1.0, curve: Curves.linear),
    );
  }

  void _move(DragUpdateDetails details) {
    final double delta = details.primaryDelta / 304;
    _controller.value -= delta;
  }

  void _settle(DragEndDetails details) {
    if(this.startFling) {
      _controller.fling(velocity: 1.0);
      this.startFling = false;
    } else if(!this.startFling){
      _controller.fling(velocity: -1.0);
      this.startFling = true;
    }
  }

  @override
  Widget build(BuildContext context) {
    final ui.Size logicalSize = MediaQuery.of(context).size;
    final double _width = logicalSize.width;
    this.flingOpening = -(48.0/_width);

    return new GestureDetector(
      onHorizontalDragUpdate: _move,
      onHorizontalDragEnd: _settle,
      child: new Stack(
        children: <Widget>[
          new Positioned.fill(
            child: new Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                new Container(
                  decoration: new BoxDecoration(
                    color: new Color(0xFFE57373),
                  ),
                  child: new IconButton(
                    icon: new Icon(Icons.delete),
                    color: new Color(0xFFFFFFFF),
                    onPressed: widget.onPressed
                  )
                ),
              ],
            ),
          ),
          new SlideTransition(
            position: new Tween<Offset>(
              begin:  Offset.zero,
              end: new Offset(this.flingOpening, 0.0),
            ).animate(_animation),
            child: new Container(
              decoration: new BoxDecoration(
                border: new Border(
                  top: new BorderSide(style: BorderStyle.solid, color: Colors.black26),
                ),
                color: new Color(0xFFFFFFFF),
              ),
              margin: new EdgeInsets.only(top: 0.0, bottom: 0.0),
              child: new Row(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  new Expanded(
                    child: new Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        new Container(
                          margin: new EdgeInsets.only(left: 16.0),
                          padding: new EdgeInsets.only(right: 40.0, top: 4.5, bottom: 4.5),
                          child: new Row(
                            children: <Widget>[
                              new Container(
                                margin: new EdgeInsets.only(right: 16.0),
                                child: new Icon(
                                  Icons.brightness_1,
                                  color: Colors.black,
                                  size: 35.0,
                                ),
                              ),
                              new Text(widget.category),
                            ],
                          )
                        )
                      ],
                    ),
                  )
                ],
              ),
            )
          ),
        ],
      )
    );
  }
}

Answer 1

您应该为每个ItemCategory设置不同的键。在您的代码中，您现在将所有键设置为相同的元素i [0]

如果您使用key: new ObjectKey(i[0]['id'])，它可以正常工作。

嗯，它适用于第21项，无论您点击哪个项目，该项目都会被删除。

Flutter - 更新ListView中的列表时出错

1 个答案: