时间戳

首页 > 解决方案 > 如何通过在 AnimatedBuilder 中点击来关闭带有 Dismissible 小部件的项目？

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

问题描述

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

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),
    );
  }
}

标签： androidiosflutterdart

解决方案

对于那些遇到相同情况的人，我找到了解决方法。首先，它更好地使用AnimatedList而不是PageView. AnimatedList您可以在此处和此处找到有关您的详细信息。然后你必须Dismissible在ItemBuilder课堂上指定。就是这样，希望它

推荐阅读