Виджет flutter_gauge не будет обновлять значение индекса на setState - PullRequest
4 голосов
/ 25 апреля 2020

У меня проблема в том, что, хотя я успешно обновляю значение моего виджета метра (FlutterGauge) через setState, сам виджет не отражает это изменение. Я знаю, что восстановление происходит, и что значение в виджете счетчика действительно обновляется.


void updateScore(bool isOnTopic) {
    //for the purposes of testing we won't use isOnTopic (its a hardcoded true anyway)
    setState(() {
      meterScore += 15;
    });
    print("Score Updated:");
    print("--------" + meterScore.toString() + "--------");
  }

  @override
  Widget build(BuildContext context) {
    print('+++++++We\'re building! Using this.meterScore value: ' +
        meterScore.toString() +
        '+++++++');

    //Replacing my FlutterGauge and return with the line below as a way to isolate the FlutterGauge widget as the problem
    //return Center(child: Text(this.meterScore.toString()));

    FlutterGauge meter = new FlutterGauge(
        circleColor: meterColor,
        secondsMarker: SecondsMarker.none,
        hand: Hand.short,
        number: Number.none,
        width: 200,
        index: meterScore,
        fontFamily: "Iran",
        counterStyle: TextStyle(color: Colors.black, fontSize: 35),
        counterAlign: CounterAlign.center,
        isDecimal: false);
    print("------------Accessing meter.index: " +
        meter.index.toString() +
        "----------------");
    return meter;
  }

Я совершенно уверен, что проблема в том, как я использую виджет FlutterGauge из пакета flutter_gauge, потому что когда я заменяю его простым текстовым виджетом и передаю ему свое значение, он будет обновите и отразите обновление, как и ожидалось.

В таком случае вот ссылка на flutter_gauge для справки: https://pub.dev/packages/flutter_gauge# -readme-tab-

I ' Я довольно плохо знаком с флаттером, и это мой первый вопрос о переполнении стека, поэтому прошу прощения, если я допускаю какие-либо очевидные ошибки. Заранее спасибо!

На случай, если я опущу важный код, который вам, возможно, понадобится увидеть, вот весь файл:

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_gauge/flutter_gauge.dart';

class Meter extends StatefulWidget {
  Meter({Key key}) : super(key: key);
  MeterState createState() => MeterState();
}

class MeterState extends State<Meter> {
  @override
  initState() {
    super.initState();
  }

  double meterScore = 75;
  Color meterColor = Colors.green;

  void updateMeterColor() {
    setState(() {
      meterColor = Colors.green;
    });
  }

  void updateScore(bool isOnTopic) {
    //for the purposes of testing we won't use isOnTopic (its a hardcoded true anyway)
    setState(() {
      meterScore += 15;
    });
    print("Score Updated:");
    print("--------" + meterScore.toString() + "--------");
  }

  @override
  Widget build(BuildContext context) {
    print('+++++++We\'re building! Using this.meterScore value: ' +
        meterScore.toString() +
        '+++++++');

    //Replacing my FlutterGauge and return with the line below as a way to isolate the FlutterGauge widget as the problem
    //return Center(child: Text(this.meterScore.toString()));

    FlutterGauge meter = new FlutterGauge(
        circleColor: meterColor,
        secondsMarker: SecondsMarker.none,
        hand: Hand.short,
        number: Number.none,
        width: 200,
        index: meterScore,
        fontFamily: "Iran",
        counterStyle: TextStyle(color: Colors.black, fontSize: 35),
        counterAlign: CounterAlign.center,
        isDecimal: false);
    print("------------Accessing meter.index: " +
        meter.index.toString() +
        "----------------");
    return meter;
  }

  @override
  void dispose() {
    print("---------We are disposing (as intended)------------");
    super.dispose();
  }
}

РЕДАКТИРОВАТЬ: здесь мой терминал после Горячий перезапуск и начальное посещение:

I/flutter (11573): +++++++We're building! Using this.meterScore value: 75.0+++++++
I/flutter (11573): ------------Accessing meter.index: 75.0----------------
I/flutter (11573): 75.0

вызов функции один раз:

I/flutter (11573): Score Updated:
I/flutter (11573): --------90.0--------
I/flutter (11573): +++++++We're building! Using this.meterScore value: 90.0+++++++
I/flutter (11573): ------------Accessing meter.index: 90.0----------------

Я обновил фрагменты кода (удалил this. из всех meterScore, добавил комментарий, адресованный функции неиспользованный аргумент)

Вероятно, я должен упомянуть, что функция updateScore вызывается вне файла. Как я уже сказал, сама функция работает нормально, как указывают операторы печати. ​​

Здесь я использую виджет (это весь файл):

class RecordingPage extends StatefulWidget {
  RecordingPage({Key key}) : super(key: key);

  _RecordingPageState createState() => _RecordingPageState();
}

class _RecordingPageState extends State<RecordingPage> {
  final GlobalKey<MeterState> meterState = GlobalKey<MeterState>();
  int yes = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        floatingActionButton: Container(
            width: this.yes * 10.0,
            child: FittedBox(
                child: FloatingActionButton(
              onPressed: null,
              backgroundColor: Colors.white,
            ))),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
        backgroundColor: Colors.white,
        appBar: offTopTitle,
        body: Column(
          children: <Widget>[
            Row(children: [
              Expanded(
                child: FlatButton(
                  child: Text("Go To Websocket"),
                  color: Colors.blue,
                  onPressed: () {
                    Navigator.pushNamed(context, WebsocketRoute);
                  },
                ),
              ),
            ]),
            Container(
              height: MediaQuery.of(context).size.height / 4,
              child: Image.asset('assets/placeholderWave.gif'),
            ),
            Container(
              margin: EdgeInsets.only(top: 5),
              height: MediaQuery.of(context).size.height / 4,
              child: Meter(key: meterState),
            ),
            Recorder((isOnTopic) {
              meterState.currentState.updateScore(isOnTopic);
            }),
          ],
        ),
        bottomNavigationBar: AppBarBuilder());
  }
}

1 Ответ

2 голосов
/ 25 апреля 2020

После игры с пакетом в новом проекте флаттера, я не смог его обновить после создания, используя много разных способов, и после просмотра всей доступной документации для пакета в настоящее время, я не уверен, что это подразумевается использоваться таким образом. Нет примеров изменения датчика после его построения, поэтому он кажется неизменным виджетом.

Я немного покопался, и syncfusion_flutter_gauges выглядит как многообещающая альтернатива, а это В статье рассказывается, как делать то, что, по-моему, вы пытаетесь сделать в своем проекте. Надеюсь, это поможет

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...