如何根据百分比指示器更改文本

Question

我有一个百分比指示器，当它的属性为 9.0 时，我想在带有百分比类型（如 90%）的文本小部件中显示它的百分比。 正如你所看到的，它的百分比超出了它的区域，它显示了当前的百分比

这是我的指标：

  child: LinearPercentIndicator(
              width: MediaQuery.of(context).size.width - 50,
              animation: true,
              lineHeight: 6.0,
              animationDuration: 2000,
              percent: 0.6,
              linearStrokeCap: LinearStrokeCap.roundAll,
              backgroundColor: Color(0xffD2D9EC),
            ),

我想将百分比： 0.6,转换为整数。 然后在文本小部件中显示它，我想做与此完全相反的事情。 这意味着我想将 int 转换为 double 并以指标百分比显示。 我想改变一次，比如当用户进入页面时。 从 API 中获取它并在那里显示它。

Answer 1

var percentValue = 0.6;

child: LinearPercentIndicator(
              width: MediaQuery.of(context).size.width - 50,
              animation: true,
              lineHeight: 6.0,
              animationDuration: 2000,
              percent: percentValue,
              linearStrokeCap: LinearStrokeCap.roundAll,
              backgroundColor: Color(0xffD2D9EC),
            ),


Text(_determineText(percentValue), style: TextStyle(color: Colors.black))


_determineText(percentValue){
 var value = percentValue * 100; //0.6 -> 60
 return (‘%’+(value.toString());
}

Answer 2

这是将十进制转换为百分比到 Int 并将其显示在Text小部件上的示例代码。 这个想法是将百分比绑定到一个公共值并将其转换为显示为文本。 我正在使用有Stateful Widget和Slider来更改百分比值，但您始终可以绑定到任何来源，例如 AOI 响应时间或类似的东西。

这是示例代码 -

import 'package:flutter/material.dart';
import 'package:percent_indicator/linear_percent_indicator.dart';

void main() {
  //Run the App Widget
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Demo App",
      home: Scaffold(
        appBar: AppBar(
          title: Text("Demo App"),
        ),
        body: Demo(),
      ),
    );
  }
}

class Demo extends StatefulWidget {
  @override
  _DemoState createState() => _DemoState();
}

class _DemoState extends State<Demo> {
  double _value = 0.0;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              '${(_value * 100.0).toInt()}%',
              style: TextStyle(fontSize: 20.0),
            ),
            SizedBox(
              height: 10.0,
            ),
            LinearPercentIndicator(
              alignment: MainAxisAlignment.center,
              width: MediaQuery.of(context).size.width - 50,
              lineHeight: 50.0,
              animationDuration: 2000,
              percent: _value,
              linearStrokeCap: LinearStrokeCap.butt,
              backgroundColor: Color(0xffD2D9EC),
            ),
            SizedBox(
              height: 10.0,
            ),
            Slider(
              min: 0.0,
              max: 1.0,
              value: _value,
              onChanged: (value) => {
                setState(() {
                  _value = value;
                })
              },
            )
          ],
        ),
      ),
    );
  }
}

和输出 -

这将使您了解如何继续获得所需的解决方案。

Answer 3

在此您使用 SeekBar，并在 Listner 中使用 SeekBar Listner 您可以更改 Textview 上的文本。

// sbVolum 是搜索栏的 id

this.sbVolume.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            public void onStartTrackingTouch(SeekBar see`enter code here`kBar) {
            }

            public void onStopTracki`enter code here`ngTouch(SeekBar seekBar) {
            }

            public void onProgressChanged(SeekBar seekBar, int i, boolean z) {
              // in this you can change text
            }
        });
```