时间戳

首页 > 解决方案 > 过滤 Streambuilder/listviewBuilder 颤动

flutter - 过滤 Streambuilder/listviewBuilder 颤动

问题描述

我是新来的，并且一直在尝试创建一个基于用户选择刷新 ListView.builder 的函数。我将城市名称作为字符串保存在用户集合中的 Firestore 文档中。我有多个按钮显示不同的城市，根据选择我需要重建 ListView 构建器。我一直在努力寻找解决方案。这里有人可以帮忙吗？

这就是我从 Firestore 检索数据的方式

 StreamBuilder(
              stream: Firestore.instance.collection('users').snapshots(),
              builder: (context, snapshot) {
                if (!snapshot.hasData) return Text('loading...');

               return Container(
                  width: 890.0,
                  height: 320.0,
                  margin: EdgeInsets.symmetric(
                      vertical: 10.0, horizontal: 00.0),
                  child: new ListView.builder(
                      scrollDirection: Axis.horizontal,
                      itemCount: snapshot.data.documents.length,
                      itemBuilder: (BuildContext context, int index) {
                        User user = User.fromDoc(snapshot.data
                            .documents[index]);
                        return Padding(
                          padding: const EdgeInsets.only(top: 0),
                          child: Container(
                              height: 300,
                              width: 300,
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(0),
                              ),
                              child: _buildCard(user)),
                        );
                      }),
                );
              },
            ),

标签： flutterlistviewstream-builder

解决方案

我刚刚编写了这段代码来显示静态城市数量的实现，单击按钮会更改索引，然后更改文本（您将它们更改为具有自定义城市流的流构建器），您还可以通过操作将其缩放为动态列表城市名单。


class MyHomePage extends StatefulWidget {
  MyHomePage({Key key,}) : super(key: key);
​
​
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
​
class _MyHomePageState extends State<MyHomePage> {
  int stackIndex = 0;
​
  final List<String> cities = ['Berlin', 'Denver', 'Nairobi', 'Tokyo', 'Rio'];
  
​
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sample'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment : MainAxisAlignment.spaceEvenly,
        children : [
          Row(
            mainAxisAlignment : MainAxisAlignment.spaceEvenly,
            mainAxisSize : MainAxisSize.max,
          children : cities.map((city){
            return RaisedButton(
              child : Text(city),
              onPressed : (){
                setState((){
                  this.stackIndex = cities.indexOf(city);
                });
              }
            );
          }).toList()
          ),
          
          IndexedStack(
          index : stackIndex,
          children: cities.map((city){
            return yourStreamBuilder(city);
          }).toList()
        ),
        ])
      ),
     
    );
  }
  
  Widget yourStreamBuilder(String city){
    //you can use your custom stream here
    //Stream stream = Firestore.instance.collection('users').where('myCity', isEqualTo: city).snapshots();
​
​
    return Text(city);//replace this with your streamBuilder 
  }
}
​

推荐阅读