如何在 StreamBuilder 中更新 Flutter Cards 而无需重置状态? [英] How to update Flutter Cards in StreamBuilder without reseting state?
问题描述
我让 StreamBuilder 正常工作.1 件事，每次 1 个元素更改时，整个列表都会重置.例如，每张卡片都有一个计数器，我希望在不改变屏幕的情况下看到加减法.我怎样才能做到这一点?这是我的代码(使用完整的文件堆栈更新)...
I got the StreamBuilder to work properly. 1 thing, every time 1 of the elements change the entire list resets. So for example each Card has a counter that I would like to see add and subtract without the screen changing. How can I do this? Here is my code (updated with full file stack) ...
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] 改变甚至 Cards 根据数字值上下移动而不完全改变 UI.
So for example, I would like numbers[Index] to change or even Cards to move up and down depending on the numbers value without completely changing the UI.
推荐答案
有一个小部件可以做到这一点:IndexedStack，它保留了栈中所有子节点的状态，同时允许你在它们之间切换:
There is a widget that can do that : IndexedStack, it preserves the state of all the children in the stack, while allowing you to switch between them:
IndexedStack(
index: _widgetIndex,
children: [
WidgetOne(),
WidgetTwo()
]
)
您可以在代码中的任何位置使用 setState() 通过修改 _widgetIndex 的值来更改应显示的小部件
You can use setState() any where in the code to change the widget that should be displayed by modifiying the value of _widgetIndex
setState(() => _widgetIndex = 2);
这篇关于如何在 StreamBuilder 中更新 Flutter Cards 而无需重置状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
