过滤 Streambuilder/listviewBuilder 颤动

Question

我是 Flutter 的新手，我一直在尝试创建一个基于用户选择刷新 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)),
                        );
                      }),
                );
              },
            ),

Answer 1

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

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 
  }
}
​

Answer 2

 int stackIndex = 0;
 final List<String> cities =[
    'Stockholm',
    'Malmö',
    'Uppsala',
    'Västerås',
    'Örebro',
    'Linköping',
    'Helsingborg',
    'Jönköping',
    'Norrköping',
    'Lund',
    'Umeå',
    'Gävle',
    'Södertälje',
    'Borås',
    'Huddinge',
    'Eskilstuna',
    'Nacka',
    'Halmstad',
    'Sundsvall',
    'Södertälje',
    'Växjö',
    'Karlstad',
    'Haninge',
    'Kristianstad',
    'Kungsbacka',
    'Solna',
    'Järfälla',
    'Sollentuna',
    'Skellefteå',
    'Kalmar',
    'Varberg',
    'Östersund',
    'Trollhättan',
    'Uddevalla',
    'Nyköping',
    'Skövde',
  ];



  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment : MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Row(
              mainAxisAlignment : MainAxisAlignment.spaceEvenly,
              mainAxisSize : MainAxisSize.max,
              children: cities.map((city) {
                return OutlineButton(
                  child: Text(city),
                  onPressed: (){
                    setState(() {
                      this.stackIndex = cities.indexOf(city);
                    });
                    },
                );
              }).toList()
            ),
            IndexedStack(
              index: stackIndex,
              children: cities.map((city){
                return myStreamBuilder(city);
              })
            )
          ],
        ),
      ),
    );
  }

  Widget myStreamBuilder(String city){
    Stream stream = Firestore.instance.collection('users').where('myCity', isEqualTo: city).snapshots();
    return Text(city);
  }
}