我让 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。
