Flutter Slider 不更新（拖动后不移动）

Question

飞镖代码sliders_view.dart:

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:firebase_database/firebase_database.dart';

class Element {
  Element(this.rawName);

  final String rawName;
  double _rating = 40;

  // getters
  double get rating => _rating;
  // setters
  set rating(double value) {
    _rating = value;
    print('Changed: ' + value.toString());
  }
}

class SlidersView extends StatefulWidget {
  @override
  _SlidersViewState createState() => _SlidersViewState();
}

class _SlidersViewState extends State<SlidersView> {
  final DatabaseReference dbRef = FirebaseDatabase.instance.reference();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: FutureBuilder<DataSnapshot>(
            future: dbRef
                .child('foo_bar')
                .once(),
            builder:
                (BuildContext context, AsyncSnapshot<DataSnapshot> snapshot) {
              if (snapshot.hasData) {
                List<Element> elements = [];
                for (var element in snapshot.data.value) {
                  elements.add(Element(element['name']));
                }
                return Column(children: [
                  for (Element element in elements)
                    CupertinoSlider(
                        value: element.rating,
                        activeColor: Colors.grey,
                        max: 100,
                        onChanged: (newRating) {
                          setState(() {
                            element.rating = newRating;
                          });
                        })
                ]);
              }
            }));
  }
}

在我切换到 FutureBuilder 以使用 FireBase 之前，我有一个 Element 对象的硬编码列表，这工作正常，所以我确信它与未来的构建器有关。

输出（通过拖动滑块）：

Reloaded 5 of 848 libraries in 150ms.
flutter: Changed: 40.37878787878788
flutter: Changed: 43.40909090909091
flutter: Changed: 45.3030303030303
flutter: Changed: 48.33333333333333
flutter: Changed: 50.22727272727272
flutter: Changed: 51.36363636363635
flutter: Changed: 52.49999999999999

视频：

https://www.loom.com/share/733177569de94bc8905cf1f3d81e6f59

Answer 1

问题是每次调用build 时都会创建新的Element 对象，这实际上会丢失您在之前的build 中设置的新数据。

所以要解决这个问题，您需要将您的elements 列表存储在FutureBuilder 之外。它应该完全存储在build 方法之外。您应该将当前列表与snapshot 中的列表进行比较，而不是仅仅将数据添加到此列表中，并且基本上将它们拉平，删除不再存在的元素，添加新元素，但不要触及两者中的元素。然后你的其余代码应该没有问题。这可能会导致一些卡顿，特别是如果列表变得太大，但测试是确定的唯一方法。

或者，您可以在这种情况下取​​消FutureBuilder，并将所有列表处理代码提取到initState。在initState 中调用dbRef.child('foo_bar').once() 并使用.then 回调，填写您的元素列表并调用setState。