>

데이터베이스의 값을 변경하는 스위치가 있습니다. FutureBuilder의 미래는 스위치의 현재 값을 얻는 것입니다 (값을 업데이트하지 못하면 스위치가 여전히 올바른 값이되도록). 스위치를 전환하면 setState를 호출하여 스위치의 값과 데이터베이스의 값을 변경합니다. 이것의 부작용은 스위치를 사용할 때마다 스위치와 FutureBuilder가 재 구축되어 스위치가 깜박이는 것입니다.

FutureBuilder에서 스위치를 구현하여 "스위치"애니메이션을 올바르게 수행하는 방법이 있습니까?

여기 내 스위치 위젯이 있습니다 :

dynamic currentValue = false;
  Future<void> _changeValue(String optionName, dynamic value) async {
    await widget.db
        .collection('CameraSettings')
        .document(optionName)
        .updateData({optionName: value});
  }
  Future<dynamic> _getValue(String optionName) async {
    DocumentSnapshot value =
        await widget.db.collection('CameraSettings').document(optionName).get();
    return value.data[optionName];
  }
  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: _getValue(widget.optionName),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {
          currentValue = snapshot.data;
          return Switch(
            value: currentValue,
            onChanged: (bool newVal) {
              setState(
                () {
                  currentValue = newVal;
                  _changeValue(widget.optionName, newVal);
                },
              );
            },
          );
        } else {
          return Switch(value: currentValue, onChanged: null);
        }
      },
    );
  }


  • 답변 # 1

    init 상태의 데이터를 얻을 수 있으므로 setState를 호출 할 때 다시 호출되지 않습니다.

    데이터가 도착했는지 확인하는 변수를 만듭니다.

    bool isDataloaded = false;
    bool currentValue = false;
    
    

    이제 init 상태에서 _getValue를 호출하십시오.

     @override
      void initState() {
        super.initState();
        _getValue(widget.optionName).then((snapshot) {
          setState(() {
            currentValue = snapshot;
            isDataloaded = true;
          });
        });
      }
    
    

    이제 위젯을 빌드하십시오

    return Container(
        child: isDataloaded ? Switch(
            value: currentValue,
            onChanged: (bool newVal) {
              setState(
                () {
                  currentValue = newVal;
                  _changeValue(widget.optionName, newVal);
                },
              );
            },
          ): Switch(value: currentValue, onChanged: null)
     );
    
    

  • 이전 c++ - std - : optional을 사용하여 맵을 초기화하고 emplace를 사용하여 추가하는 방법
  • 다음 vue.js - v-for를 사용하는 동안 Vue 소품을 자식 구성 요소에 전달하는 방법은 무엇입니까?