显示百分比指示器在 Flutter 中?

kqqjbcuj  于 2023-03-24  发布在  Flutter
关注(0)|答案(3)|浏览(199)

该百分比指示器中显示的最大日期为20
如果我当前的未决日是10,那么它将显示进度条的一半。
我怎么能这样表演?
示例代码如下:

class _ApplyLeaveState extends State<ApplyLeave> {
  double percent = 20.0;
Widget build(BuildContext context) {
    double height = MediaQuery
        .of(context)
        .size
        .height;
    double width = MediaQuery
        .of(context)
        .size
        .width;

    return WillPopScope(
      onWillPop: () async {
        return false;
      },
      child: Scaffold(
        backgroundColor: Colors.white,
        drawer: SideBar(),
        appBar: AppBar(
          title: Text(app_leave),
        ),
        body: Container(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          child: SingleChildScrollView(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Padding(
                  padding: const EdgeInsets.only(top: 15.0),
                  child: Align(
                    alignment: Alignment.center,
                    child: CircularPercentIndicator(
                      radius: 100.0,
                      lineWidth: 15.0,
                      percent: 0.6,
                        center:  Text(
                          leave_pending,
                          style: TextStyle(
                              fontSize: 20.0,
                              fontWeight: FontWeight.w600,
                              color: Colors.black),
                        ),
                      backgroundColor: Colors.grey,
                      circularStrokeCap: CircularStrokeCap.round,
                      progressColor: Colors.blue,
                    ),
                  ),
                ),

我试过这个代码吗?

u1ehiz5o

u1ehiz5o1#

试试这个代码

class Home extends StatefulWidget {
  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  double pendingDays = 10;
  double percent = 20.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Percent Indicator'),
      ),
      body: Center(
        child: GestureDetector(
          onTap: () {
            setState(() {
              pendingDays++; // increase pending days on tap
              percent = pendingDays / 20; // calculate percentage
            });
          },
          child: CircularPercentIndicator(
            radius: 100.0,
            lineWidth: 15.0,
            percent: pendingDays / 20,
            center: Text(
              "Pending Days: $pendingDays",
              style: TextStyle(fontSize: 20.0),
            ),
            backgroundColor: Colors.grey,
            circularStrokeCap: CircularStrokeCap.round,
            progressColor: Colors.blue,
          ),
        ),
      ),
    );
  }
}

以上代码输出:

juud5qan

juud5qan2#

逻辑是

CircularProgressIndicator(
  value: currentDay / maxDay,
),
Text("${maxDay - currentDay}d"),

你可以玩widget。

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int currentDay = 10;
  int maxDay = 20;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GestureDetector(
        onTap: () {
          setState(() {
            currentDay++;
          });
        },
        child: Scaffold(
          body: Center(
            child: SizedBox(
              height: 200,
              width: 200,
              child: Stack(
                fit: StackFit.expand,
                children: [
                  CircularProgressIndicator(
                    value: currentDay / maxDay,
                  ),
                  Align(
                    child: Text("${maxDay - currentDay}d"),
                  )
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}
5m1hhzi4

5m1hhzi43#

`    static const EventChannel _channel = EventChannel('video_editor_progress');    `    

late StreamSubscription _streamSubscription;
 int processPercentage = 0; 



  void initState() {
_enableEventReceiver();
super.initState();}   

 void _enableEventReceiver() {
_streamSubscription =
    _channel.receiveBroadcastStream().listen((dynamic event) {
  setState(() {
    processPercentage = (event.toDouble() * 100).round();
  });
}, onError: (dynamic error) {
  log('Received error: ${error.message}');
}, cancelOnError: true);};



void loadingStart(){
setState(() => processPercentage = 0);};

相关问题