我遇到的问题是,虽然我通过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小组件替换它,并将我的值反馈给它时,它将按预期更新并反映更新。
既然如此,这里有一个flutter_gauge的链接供参考。https:/pub.devpackagesflutter_gauge#-readme-tab-。
我对flutter很陌生,这是我的第一个stackoverflow问题,如果我犯了什么明显的错误,请原谅。先谢谢你
万一我漏掉了一些重要的代码,你可能需要看看,这里是整个文件。
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();
}
}
EDITS:这是我的终端 在热重启和初始访问后的情况:
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函数是在文件之外被调用的。正如我所说,函数本身似乎工作得很好,正如打印语句所显示的那样。
这里是我使用widget的地方(这是整个文件)。
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 看起来是一个有前途的选择,而且 这个 文章介绍了如何在你的项目中做我认为你正在尝试的事情。希望对你有帮助
我想我找到了解决办法。这对我很有用。打开flutter_gauge.dart并删除所有评论的部分。重新安装回你的应用程序并刷新你的数据。这个步骤对我来说是有效的。