当用户向下滚动然后再次向上滚动时，如何阻止已经翻转的翻转卡片翻转回来？

Question

我的问题如标题所述 - 我有翻转卡片的网格视图。当我翻几张时，滚动过去然后向上滚动卡片已经翻转回来。我真的不希望发生这种情况，因为它应该是每次用户翻转卡片时都会将一个点添加到总数中，然后当他们将其翻转回来时从总数中减去一个点。我已经尝试过“AutomaticKeepAliveClientMixin”，它可以在我有另一个选项卡时保持状态，但它似乎无助于在我滚动时保持卡片翻转。

如果此处存在明显的解决方案而我错过了，请提前致歉。我确实尝试在网上找到解决方案。这是我正在使用的飞镖文件中的代码：

import 'package:flutter/material.dart';
import 'package:flip_card/flip_card.dart';
import 'statenames.dart';
import 'globalVariables.dart';


StateNames stateObject = new StateNames();

class GridOne extends StatefulWidget {


  final Function updateCounter;
  final Function decreaseCount;
  GridOne(this.updateCounter, this.decreaseCount);

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

class _GridOneState extends State<GridOne>
    with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  int points = 0;
  @override
  Widget build(BuildContext context) {
    
    return new Scaffold(
     body: GridView.count(
         crossAxisCount: 4,

         children: List.generate(52, (index){
           
           return Card(

             elevation: 0.0,
             margin: EdgeInsets.only(left: 3.0, right: 3.0, top: 9.0, bottom: 0.0),
             color: Color(0x00000000),
             child: FlipCard(
               direction: FlipDirection.HORIZONTAL,
               speed: 1000,

               onFlipDone: (status) {


                 setState(() {
                   (status)

                   ? widget.decreaseCount()
                   : widget.updateCounter();
                 });


                 print(counter);




               },
               front: Container(
                 decoration: BoxDecoration(
                   color: Color(0xFF006666),
                   borderRadius: BorderRadius.all(Radius.circular(8.0)),
                 ),
                 child: Column(
                   mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                   children: <Widget>[
                     FittedBox(fit:BoxFit.fitWidth,
                     child: Text(stateObject.stateNames[index], style: TextStyle(fontFamily: 'Architects Daughter', color: Colors.white), )
                        
                 ),
                     Text('',
                         style: Theme.of(context).textTheme.body1),
                   ],
                 ),
               ),
               back: Container(
                 decoration: BoxDecoration(
                   color: Color(0xFF006666),
                   borderRadius: BorderRadius.all(Radius.circular(8.0)),

                 ),
                 child: Column(
                   mainAxisAlignment: MainAxisAlignment.center,
                   children: <Widget>[

                     Image(image: AssetImage(stateObject.licensePlatePaths[index])),
                     
                   ],

                 ),
               ),
             ),
           );
         })
     ),
    );
  }
}

非常感谢您的阅读。

Answer 1

我确实尝试过达到你想要的，我认为只有你使用列才有可能。我什至尝试使用简单的 ListView，但卡片仍然 return 到正面

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

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

class Test extends StatefulWidget{
  @override
  _Test createState() => _Test();
}

class _Test extends State<Test>{
  List<Widget> list = [];
  _Test(){
    list = new List.filled(30, flipCards());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SingleChildScrollView(
          child: Column(
            children: list,
          ),
        )
    );
  }

  Widget flipCards(){
    return Container(
      height: 70,
        child: FlipCard(
          flipOnTouch: true,
          front: Card(
            child: Container(
              alignment: Alignment.center,
              child: Text('Toggle'),
            ),
          ),
          back: Card(
            child: Container(
              alignment: Alignment.center,
              child: Text('Back'),
            ),
          ),
        )
    );
  }
}

Answer 2

您需要在 GridView

的 children 上使用 AutomaticKeepAliveClientMixin

因此，为您的卡片制作一个新的有状态小部件，并在那里使用 keepalive。同样对于 AutomaticKeepAliveClientMixin 你需要在你的构建方法中调用 super.build(context);

当用户向下滚动然后再次向上滚动时，如何阻止已经翻转的翻转卡片翻转回来？

How can I stop flip cards that have already been flipped from flipping back when user scrolls down and then scrolls back up again?

android

gridview

dart

android-studio

flutter