尝试在用户光标颤动时更改文本

Question

我正在制作一个加密应用程序，它获取实时加密数据并将其放入图表中。一旦用户在图表上切换，一个变量就会捕获该值，然后我尝试更新价格文本以类似于该值。

因此，图像上显示“51120 $”的“比特币”下方的文本应该在图形上显示光标的值（图像上显示为 51185）。

当有人在图上大骂时，我传递一个函数：

LineTouchTooltipData(
                            
                            getTooltipItems: (touchedSpots) {
                              _aCallbackFunction(touchedSpots[0].y);

我们将光标的y值传递给函数，所以我如下代码所示，在build方法期间可以设置一个变量等于光标的y值。

所以变量 liveData 等于我们传递给函数的数据。

 @override Widget build(BuildContext context, ) {
void _aCallbackFunction(double data) {
  livePrice = data;
  print(livePrice);
}

如您在上面的代码中看到的，我打印了值，并且该值与游标值是准确的。

flutter: 51297.961286325546
flutter: 51271.14153804512
flutter: 51070.254057329286
flutter: 50989.604327562614
flutter: 51106.40729916659
etc....

通过显示价格的小部件，我已将文本设置为 livePrice，希望当我们在图表上光标时它会更新其值。但是，文本保持不变，并且不会更新其值，即使 livePrice 变量更改了值。

Text(
livePrice.toStringAsFixed(0) + " \$",
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold),
),

小部件是有状态的。 这是我的代码：

class CoinView extends StatefulWidget {
  final String id;
  final String name;
  final String symbol;
  final String imageUrl;
  dynamic price;
  final dynamic change;
  final dynamic changePercentage;
  final Function getGraphData;
  final List<FlSpot> spotValues;
  final double minValue;
  final double maxValue;
  final DateTime selectedRange;

  CoinView(
      this.id,
      this.name,
      this.symbol,
      this.imageUrl,
      this.price,
      this.change,
      this.changePercentage,
      this.getGraphData,
      this.spotValues,
      this.minValue,
      this.maxValue,
      this.selectedRange);

  @override
  State<CoinView> createState() => _CoinViewState();
}

class _CoinViewState extends State<CoinView> {
  void changeRange(DateTime range) {
    widget.spotValues.clear();
    chartData.clear();
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) {
          return LoadingScreen(
              widget.id,
              widget.name,
              widget.symbol,
              widget.imageUrl,
              widget.price,
              widget.change,
              widget.changePercentage,
              range);
        },
      ),
    );
  }

  late dynamic livePrice = widget.price;

  @override
  List<Color> gradientColors = [
    const Color(0xff23b6e6),
    const Color(0xff02d39a),
  ];

  

  

    @override
      Widget build(BuildContext context) {
        void _aCallbackFunction(double data) {
          livePrice = data;
          print(livePrice);
        }
    
        return Scaffold(
          appBar: AppBar(
            elevation: 0.0,
            backgroundColor: Colors.transparent,
            leading: IconButton(
              icon: Icon(
                Icons.arrow_back,
                color: Colors.white.withOpacity(0.5),
              ),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => MyApp()),
                );
              },
            ),
          ),
          body: Stack(
            children: [
              Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Padding(
                            padding: const EdgeInsets.only(top: 20, left: 20),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Container(
                                  
                                  child: Row(
                                    children: [
                                      Container(
                                        height: 30,
                                        child: Image.network(widget.imageUrl),
                                      ),
                                      SizedBox(
                                        width: 10,
                                      ),
                                      Text(
                                        widget.name,
                                        style: TextStyle(
                                            color: Colors.white,
                                            fontSize: 40,
                                            fontWeight: FontWeight.bold),
                                      ),
                                    ],
                                  ),
                                ),
                                SizedBox(height: 20),
                                Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Text(
                                      livePrice.toStringAsFixed(0) + " \$",
                                      style: TextStyle(
                                          fontSize: 30,
                                          fontWeight: FontWeight.bold),
                                    ),

Answer 1

我建议将 _aCallbackFunction 函数移到构建方法之外，并在该函数中调用 setState。

void _aCallbackFunction(double data) {
  setState(() => livePrice = data);
  print(livePrice);
}

@override Widget build(BuildContext context, ) {
  //...
}