flutter_gauge 小部件不会更新 setState 上的索引值
flutter_gauge widget won't update index value on setState
我遇到的问题是,虽然我通过 setState 成功地更新了我的仪表 (FlutterGauge) 小部件的值,但小部件本身并没有反映出这种变化。我知道重建正在进行,并且仪表小部件上的值确实正在更新。
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;
}
我相当确定问题出在我如何使用 flutter_gauge 包中的 FlutterGauge 小部件,因为当我用一个简单的 Text 小部件替换它并向它提供我的值时,它会更新并按预期反映更新。
既然如此,这里有一个link到flutter_gauge供参考:
https://pub.dev/packages/flutter_gauge#-readme-tab-
我是 flutter 的新手,这是我的第一个 Whosebug 问题,如果我犯了任何明显的错误,我深表歉意。提前致谢!
以防万一我遗漏了您可能需要查看的重要代码,这是整个文件:
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----------------
我更新了代码片段(从所有 meterScore 中删除了 this.,添加了解决函数未使用参数的注释)
我应该提一下,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());
}
}
在一个新的 flutter 项目中玩弄了这个包之后,我一直无法在创建后使用许多不同的方式更新它,并且在此时查看了该包的所有可用文档之后,我不确定它旨在以这种方式使用。没有在构建后更改仪表的示例,因此它似乎是一个不可变的小部件。
我做了一些挖掘,syncfusion_flutter_gauges looks like a promising alternative and this 文章讨论了如何做我认为您在项目中尝试的事情。希望对你有帮助
我想我找到了解决办法。这对我有用。打开 flutter_gauge.dart 并删除所有评论部分。重新安装您的应用程序并刷新您的数据。这个步骤对我有用。
我遇到的问题是,虽然我通过 setState 成功地更新了我的仪表 (FlutterGauge) 小部件的值,但小部件本身并没有反映出这种变化。我知道重建正在进行,并且仪表小部件上的值确实正在更新。
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;
}
我相当确定问题出在我如何使用 flutter_gauge 包中的 FlutterGauge 小部件,因为当我用一个简单的 Text 小部件替换它并向它提供我的值时,它会更新并按预期反映更新。
既然如此,这里有一个link到flutter_gauge供参考: https://pub.dev/packages/flutter_gauge#-readme-tab-
我是 flutter 的新手,这是我的第一个 Whosebug 问题,如果我犯了任何明显的错误,我深表歉意。提前致谢!
以防万一我遗漏了您可能需要查看的重要代码,这是整个文件:
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----------------
我更新了代码片段(从所有 meterScore 中删除了 this.,添加了解决函数未使用参数的注释)
我应该提一下,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());
}
}
在一个新的 flutter 项目中玩弄了这个包之后,我一直无法在创建后使用许多不同的方式更新它,并且在此时查看了该包的所有可用文档之后,我不确定它旨在以这种方式使用。没有在构建后更改仪表的示例,因此它似乎是一个不可变的小部件。
我做了一些挖掘,syncfusion_flutter_gauges looks like a promising alternative and this 文章讨论了如何做我认为您在项目中尝试的事情。希望对你有帮助
我想我找到了解决办法。这对我有用。打开 flutter_gauge.dart 并删除所有评论部分。重新安装您的应用程序并刷新您的数据。这个步骤对我有用。