Flutter listView 在删除项目后没有更新

Question

我正在使用列表视图来显示一些项目，而且我正在使用 flutter_tindercard

要在项目获得批准后批准或拒绝项目，应将其添加到批准的项目列表中，然后从列表视图中删除，对于拒绝的项目也是如此，但项目被拒绝或批准时的问题是不从列表视图中删除。

PS: 底部元素没有移动到顶部

我的代码：

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

class ExampleHomePage extends StatefulWidget {
  @override
  _ExampleHomePageState createState() => _ExampleHomePageState();
}

class _ExampleHomePageState extends State<ExampleHomePage>
    with TickerProviderStateMixin {
  List approved = [];
  List refused = [];

  List<String> welcomeImages = [
    "https://images.unsplash.com/photo-1631636176993-759dea1a1300?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0fHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
    "https://images.unsplash.com/photo-1631634176568-f543af6a41de?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw3fHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
    "https://images.unsplash.com/photo-1631691971564-adf9419d904e?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxM3x8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
    "https://images.unsplash.com/photo-1631641906574-24adb8594649?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxMnx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
    "https://images.unsplash.com/photo-1593642702821-c8da6771f0c6?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxMXx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
    "https://images.unsplash.com/photo-1631621461675-e61a1f28d3d6?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0NHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
  ];
  List<TinderCarder> cards = [];
  CardController controller = CardController(); //Use this to trigger swap.

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    cards = welcomeImages.map((element) {
      return TinderCarder(
        image: element,
        controller: controller,
        onLeftPress: () {
          setState(() {
            cards.removeAt(element.indexOf(element));
            print('index is: ' + "${element.indexOf(element)}");
            print('list length: ' + cards.length.toString());
          });
        },
        onRightPress: () {
          setState(() {
            cards.removeAt(element.indexOf(element));
            print('index is: ' + "${element.indexOf(element)}");
            print('list length: ' + cards.length.toString());
          });
        },
      );
    }).toList();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: double.infinity,
        child: ListView(
          children: cards,
        ),
      ),
    );
  }
}

class TinderCarder extends StatelessWidget {
  final String image;
  Function onLeftPress;
  Function onRightPress;
  var controller;

  TinderCarder(
      {required this.image,
      this.controller,
      required this.onLeftPress,
      required this.onRightPress});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      child: TinderSwapCard(
        orientation: AmassOrientation.BOTTOM,
        totalNum: 1,
        stackNum: 3,
        swipeEdge: 4.0,
        maxWidth: double.infinity,
        maxHeight: MediaQuery.of(context).size.width * 0.9,
        minWidth: MediaQuery.of(context).size.width * 0.8,
        minHeight: MediaQuery.of(context).size.width * 0.8,
        cardBuilder: (context, index) => Card(
          child: Image.network(
            image,
            width: double.infinity,
            fit: BoxFit.cover,
          ),
        ),
        cardController: controller,
        swipeUpdateCallback: (DragUpdateDetails details, Alignment align) {
          /// Get swiping card's alignment
          if (align.x < 0) {
          } else if (align.x > 0) {}
        },
        swipeCompleteCallback: (CardSwipeOrientation orientation, int index) {
          print(orientation.toString());
          if (orientation == CardSwipeOrientation.LEFT) {
            print("Card is LEFT swiping");
            // print(welcomeImages.length);
            onLeftPress();
          } else if (orientation == CardSwipeOrientation.RIGHT) {
            print("Card is RIGHT swiping");
            // print(welcomeImages.length);
            onRightPress();
          }
        },
      ),
    );
  }
}

Answer 1

已编辑

试试 setstate

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

class ExampleHomePage extends StatefulWidget {
  @override
  _ExampleHomePageState createState() => _ExampleHomePageState();
}

class _ExampleHomePageState extends State<ExampleHomePage>
    with TickerProviderStateMixin {
  List approved = [];
  List refused = [];

  List<String> welcomeImages = [
    "https://images.unsplash.com/photo-1631636176993-759dea1a1300?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0fHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
    "https://images.unsplash.com/photo-1631634176568-f543af6a41de?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw3fHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
    "https://images.unsplash.com/photo-1631691971564-adf9419d904e?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxM3x8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
    "https://images.unsplash.com/photo-1631641906574-24adb8594649?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxMnx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
    "https://images.unsplash.com/photo-1593642702821-c8da6771f0c6?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxMXx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
    "https://images.unsplash.com/photo-1631621461675-e61a1f28d3d6?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0NHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
  ];
  List<TinderCarder> cards = [];
  CardController controller = CardController(); //Use this to trigger swap.

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    cards = welcomeImages.map((element) {
      return TinderCarder(
        image: element,
        controller: controller,
        onLeftPress: () {
          setState(() {
            cards.removeAt(element.indexOf(element));
            print('index is: ' + "${element.indexOf(element)}");
            print('list length: ' + cards.length.toString());
          });
        },
        onRightPress: () {
          setState(() {
            cards.removeAt(element.indexOf(element));
            print('index is: ' + "${element.indexOf(element)}");
            print('list length: ' + cards.length.toString());
          });
        },
      );
    }).toList();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: double.infinity,
        child: SingleChildScrollView(
          child: ListView(
            shrinkWrap: true,
            key: Key(cards.length.toString()),
            physics: ScrollPhysics(),
            children: cards,
          ),
        ),

      ),
    );
  }
}

class TinderCarder extends StatelessWidget {
  final String image;
  Function onLeftPress;
  Function onRightPress;
  var controller;

  TinderCarder(
      { this.image,
        this.controller,
         this.onLeftPress,
         this.onRightPress});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      child: TinderSwapCard(
        orientation: AmassOrientation.BOTTOM,
        totalNum: 1,
        stackNum: 3,
        swipeEdge: 4.0,
        maxWidth: MediaQuery.of(context).size.width * 0.9,
        maxHeight: MediaQuery.of(context).size.width * 0.9,
        minWidth: MediaQuery.of(context).size.width * 0.8,
        minHeight: MediaQuery.of(context).size.width * 0.8,
        cardBuilder: (context, index) => Card(
          child: Image.network(
            image,
            width: double.infinity,
            fit: BoxFit.cover,
          ),
        ),
        cardController: controller,
        swipeUpdateCallback: (DragUpdateDetails details, Alignment align) {
          /// Get swiping card's alignment
          if (align.x < 0) {
          } else if (align.x > 0) {}
        },
        swipeCompleteCallback: (CardSwipeOrientation orientation, int index) {
          print(orientation.toString());
          if (orientation == CardSwipeOrientation.LEFT) {
            print("Card is LEFT swiping");
            // print(welcomeImages.length);
            onLeftPress();
          } else if (orientation == CardSwipeOrientation.RIGHT) {
            print("Card is RIGHT swiping");
            // print(welcomeImages.length);
            onRightPress();
          }
        },
      ),
    );
  }
}

Answer 2

如果您使用的是有状态小部件，请应用 setstate() 重新构建您的小部件。如果您想使用无状态小部件，而不是使用像 GetX 或提供者这样的状态管理。对于 GetX，在控制器中创建可观察列表并用 obx 包装小部件，因此每当更新列表时，obx 都会再次为您构建该特定小部件。要正确学习 GetX，请浏览由 tadas petra 创建的播放列表。 https://www.youtube.com/playlist?list=PL26uY6-lIzqkmvpNr9gMCrIvl8k5Mqrhs

Flutter listView 在删除项目后没有更新

Flutter listView isn't updating after deleting items

listview

flutter