android - 如何通过在 AnimatedBuilder 中点击来关闭带有可关闭小部件的项目？

Question

我是 flutter 新手。我有一个 Playground 应用程序，我正在尝试从列表中删除该项目。我发现这个例子没有关闭功能。通过在特定方向上滑动它可以正常工作，但我需要的是通过点击卡上的数字来消除它并完全删除滑动功能。提前致谢。

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class ColorCards {
  int id;
  Color color;

  ColorCards({this.id, this.color});
}

class _MyHomePageState extends State<MyHomePage> {
  PageController controller;
  int currentPage = 0;
  List<ColorCards> cards = [
    ColorCards(id: 1, color: Colors.green),
    ColorCards(id: 2, color: Colors.yellow),
    ColorCards(id: 3, color: Colors.green),
    ColorCards(id: 4, color: Colors.yellow),
    ColorCards(id: 5, color: Colors.green),
  ];

  @override
  initState() {
    super.initState();
    controller = PageController(
      initialPage: currentPage,
      keepPage: false,
      viewportFraction: 0.85,
    );
  }

  @override
  dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    //Scaffold
    return Scaffold(
      appBar: AppBar(
        title: Text('Playground App'),
        backgroundColor: Colors.grey,
      ),
      body: Center(
        child: Container(
          child: PageView.builder(
              onPageChanged: (value) {
                setState(() {
                  currentPage = value;
                });
              },
              itemCount: cards.length,
              controller: controller,
              itemBuilder: (context, index) => builder(index)),
        ),
      ),
    );
  }

  builder(int index) {
    return AnimatedBuilder(
      animation: controller,
      builder: (context, child) {
        double value = 1.0;
        if (controller.position.haveDimensions) {
          value = controller.page - index;
          value = (1 - (value.abs() * .1)).clamp(0.0, 1.0);
        }
        return Center(
          child: Dismissible(
            key: Key(cards[index].id.toString()),
            direction: DismissDirection.up,
            onDismissed: (direction) {
              cards.removeAt(index);
              setState(() {
                controller.animateToPage(index,
                    duration: Duration(milliseconds: 1), curve: Curves.bounceIn);
              });
            },
            child: SizedBox(
              height: Curves.easeOut.transform(value) * 300,
              width: Curves.easeOut.transform(value) * 350,
              child: child,
            ),
          ),
        );
      },
      child: Container(
          child: Center(
              child: GestureDetector(
            onTap: () {
              print('Dismiss this item');
            },
            child: Text(
              cards[index].id.toString(),
              style: TextStyle(
                  fontSize: 60.0, color: Colors.white, fontWeight: FontWeight.bold),
            ),
          )),
          margin: const EdgeInsets.all(8.0),
          color: cards[index].color),
    );
  }
}

Answer 1

对于那些遇到同样情况的人，我已经找到了解决方法。首先，最好使用 AnimatedList 而不是 PageView。有关 AnimatedList 的详细信息，您可以找到 here和 here .然后您必须在 ItemBuilder 类中指定 Dismissible 。就是这样，希望如此