firebase - 如何在不重置状态的情况下更新 StreamBuilder 中的 Flutter Cards？

Question

我让 StreamBuilder 正常工作。 1 件事，每次 1 个元素更改时，整个列表都会重置。因此，例如，每张卡片都有一个计数器，我希望在不改变屏幕的情况下看到它的加减。我怎样才能做到这一点？这是我的代码(更新了完整的文件堆栈)...

    final FirebaseAuth _auth = FirebaseAuth.instance;
final fb = FirebaseDatabase.instance.reference();
final falQuery = fb.child('NumberOnes').orderByChild('Value');
final streamQuery = fb.child('NumberOnes').orderByChild('Value').onValue;

class NumberOnesPage extends StatefulWidget {
  @override
  NumberOnesPageState createState() => new NumberOnesPageState();
}

class NumberOnesPageState extends State<NumberOnesPage> {
  List names = new List();
  List numbers = new List();
  List ids = new List();
  List vidImages = new List();

  void _handleJson(value) {
    Map myMap = value; //store each map
    var titles = myMap.values;
    for (var items in titles) {
      names.add(items['vidTitle']);
      numbers.add(items['Value']);
      ids.add(items['vidId']);
      vidImages.add(items['vidImage']);
    }
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          backgroundColor: Colors.amber,
          title: new Text(
            'Number Ones',
            style:
                new TextStyle(fontWeight: FontWeight.bold, color: Colors.black),
          ),
        ),
        body: new Container(
          child: new Center(
              child: new Column(
            children: <Widget>[
              new Flexible(
                  child: new FirebaseAnimatedList(
                      query: falQuery,
                      padding: new EdgeInsets.all(15.0),
                      //sort: (a, b) => b.key.compareTo(a.key),
                      reverse: false,
                      itemBuilder: (_, DataSnapshot followerSnap,
                          Animation<double> animation, int Index) {
                        return new StreamBuilder<Event>(
                            stream: streamQuery,
                            builder: (BuildContext context,
                                AsyncSnapshot<Event> event) {
                              switch (event.connectionState) {
                                case ConnectionState.none:
                                  return new Card(
                                    child: new Text('Loading...',
                                        style: new TextStyle(
                                            fontSize: 12.0,
                                            fontWeight: FontWeight.bold,
                                            fontStyle: FontStyle.italic)),
                                  );
                                case ConnectionState.waiting:
                                  return new Card(
                                    child: new Text('Awaiting Results...',
                                        style: new TextStyle(
                                            fontSize: 12.0,
                                            fontWeight: FontWeight.bold,
                                            fontStyle: FontStyle.italic)),
                                  );
                                default:
                                  if (event.hasError)
                                    return new Card(
                                      child: new Text('Error: ${event.error}',
                                          style: new TextStyle(
                                              fontSize: 12.0,
                                              fontWeight: FontWeight.bold,
                                              fontStyle: FontStyle.italic)),
                                    );
                                  else
                                    _handleJson(event.data.snapshot.value);
                                  return new InkWell(
                                    splashColor: Colors.blueAccent,
                                    onTap: () {
                                      Navigator.push(
                                          context,
                                          new MaterialPageRoute(
                                              builder: (_) =>
                                                  new Video.VideoPage()));
                                      Video.id = ids[Index];
                                      Video.title = names[Index];
                                      Video.videoImage = vidImages[Index];
                                    },
                                    child: new Card(
                                      child: new Column(
                                        children: <Widget>[
                                          new Padding(
                                              padding: new EdgeInsets.all(5.0)),
                                          new Image.network(vidImages[Index]),
                                          new Padding(
                                              padding: new EdgeInsets.all(3.0)),
                                          new Text(
                                              '${numbers[Index]} MyFavKPopers Have Made This Their #1'),
                                          new Padding(
                                              padding: new EdgeInsets.all(3.0)),
                                          new Text(
                                            names[Index],
                                            style: new TextStyle(
                                                fontSize: 18.0,
                                                fontWeight: FontWeight.bold,
                                                color: Colors.black),
                                            //textAlign: TextAlign.center,
                                          ),
                                          new Padding(
                                              padding: new EdgeInsets.all(5.0)),
                                        ],
                                      ),
                                    ),
                                  );
                              }
                            });
                      }))
            ],
          )),
        ));
  }
}

因此，例如，我希望 numbers[Index] 可以根据数字值进行更改，甚至卡片可以上下移动，而无需完全更改 UI。

Answer 1

有一个小部件可以做到这一点:IndexedStack ，它保留堆栈中所有子项的状态，同时允许您在它们之间切换:

IndexedStack(
index: _widgetIndex,
children: [
 WidgetOne(),
 WidgetTwo()
]
)

您可以在代码中的任何地方使用 setState() 来通过修改 _widgetIndex 的值来更改应该显示的小部件

setState(() => _widgetIndex = 2);