如何實作FutureBuilder飛鏢、顫振

我有這個靜態函式，它從我的資料庫（firebasefirestore）回傳一個 Future。現在我需要它是一個雙倍，因為我必須為使用的小部件提供一個雙倍。我發現 FutureBuilder 是用于這種場景的可行類，我只是不確定如何在我的代碼中正確實作它。請參見下面的代碼：

class SomellierChart extends StatefulWidget {
  SomellierChart(
      {Key? key,
      required this.color,
      required this.textColor,
      required this.queryDocumentSnapshot})
      : super(key: key);
  Color textColor;
  Color color;
  List<QueryDocumentSnapshot> queryDocumentSnapshot;
  @override
  _SomellierChartState createState() => _SomellierChartState();
}

class _SomellierChartState extends State<SomellierChart> {
  static Future<double> spotData(String day, queryDocumentSnapshot) async {
    final documentSnapshot = await FirebaseFirestore.instance
        .collection('users')
        .doc(FirebaseAuth.instance.currentUser!.uid.toString())
        .collection('activity')
        .doc('${globals.year}')
        .collection('week${globals.week}')
        .doc(day.toString())
        .get();

    if (documentSnapshot.exists) {
      print('Document exists');
      return documentSnapshot['usage'].toDouble();
    } else {
      print('Document doesnt exist');
      return 0;
    }
  }

  @override
  Widget build(BuildContext context) {
    return LineChart(
        LineChartData(
          gridData: FlGridData(
            show: false,
          ),
          titlesData: FlTitlesData(
            show: true,
            rightTitles: SideTitles(showTitles: false),
            topTitles: SideTitles(showTitles: false),
            leftTitles: SideTitles(showTitles: false),
            bottomTitles: SideTitles(
              showTitles: true,
              reservedSize: 20,
              interval: 1,
              getTextStyles: (context, value) => GoogleFonts.poppins(
                textStyle: TextStyle(
                  color: Theme.of(context).indicatorColor,
                  fontWeight: FontWeight.w600,
                  fontSize: 12,
                ),
              ),
              getTitles: (value) {
                switch (value.toInt()) {
                  case 0:
                    return 'Mon';
                  case 2:
                    return 'Tue';
                  case 4:
                    return 'Wed';
                  case 6:
                    return 'Thu';
                  case 8:
                    return 'Fri';
                  case 10:
                    return 'Sat';
                  case 12:
                    return 'Sun';
                }
                return '';
              },
              margin: 5,
            ),
          ),
          borderData: FlBorderData(show: false),
          minX: 0,
          maxX: 12,
          minY: 0,
          maxY: 3,
          lineBarsData: [
            LineChartBarData(
              spots: [
                FlSpot(0, spotData('1', widget.queryDocumentSnapshot)),
                FlSpot(2, spotData('2', widget.queryDocumentSnapshot)),
                FlSpot(4, spotData('3', widget.queryDocumentSnapshot)),
                FlSpot(6, spotData('4', widget.queryDocumentSnapshot)),
                FlSpot(8, spotData('5', widget.queryDocumentSnapshot)),
                FlSpot(10, spotData('6', widget.queryDocumentSnapshot)),
                FlSpot(12, spotData('7', widget.queryDocumentSnapshot)),
              ],
              isCurved: true,
              curveSmoothness: 0.5,
              preventCurveOverShooting: true,
              colors: [widget.textColor],
              barWidth: 3,
              isStrokeCapRound: true,
              dotData: FlDotData(
                show: false,
              ),
              belowBarData: BarAreaData(
                show: true,
                colors: [
                  widget.color.withOpacity(0.4),
                ],
              ),
            ),
          ],
        ),
      );
    }
  }

雙重需要提供給 FlSpot。我使用靜態函式 spotData(day, queryDocumentSnapshot) 這樣做 - 唯一的問題：我回傳的是 Future 而不是雙...

非常感謝你的幫助！

uj5u.com熱心網友回復：

您可以執行以下操作：

• 初始化futureDouble_initState()
• 在FutureBuilder中使用它
• 該值是從中獲得的snapshot.data!（double就是這種情況，因為FutureBuilder<double>已定義，但您可以為任何物件定義它）。

class _SomellierChartState extends State<SomellierChart> {
  late Future<double> futureDouble;
  
  Future<double> spotData(String day, queryDocumentSnapshot) async {
    ...
  }

  @override
  void initState() {
    super.initState();
    futureDouble = spotData('', null);
  }


  @override
  Widget build(BuildContext context) {
    return FutureBuilder<double>(
        future: futureDouble,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return _lineChart(snapshot.data!);
          } else if (snapshot.hasError) {
            return Text('${snapshot.error}');
          }
          return const CircularProgressIndicator();
        });
  }

  Widget _lineChart(double value) {
    return LineChart(...
    );
  }
}

您還可以有一個雙重串列，例如

late Future<List<double>> futureDouble;
Future<List<double>> spotData(String day, queryDocumentSnapshot) async {
  ...
}

和

return FutureBuilder<List<double>>(...)

其中snapshot.data!將是List<double>。

要擁有回傳值串列的方法，您可以使用以下內容：

  Future<List<double>> values() async {
    var list = <double>[];
    list.add(await value());
    list.add(await value());
    list.add(await value());
    list.add(await value());
    list.add(await value());
    list.add(await value());
    return list;
  }

  Future<double> value() async {
    return 1;
  }

標籤：火力基地 扑 镖 异步 谷歌云火库

上一篇：如何將小部件與行的中心對齊并將其他2個小部件與每個剩余空間的中心對齊？

下一篇：Flutter：如何將文本欄位中的輸入保存到int變數中？