当前位置：首页 > news >正文

Flutter开发 LinearProgressIndicato、CircularProgressIndicator

news 2025/8/11 10:44:29

LinearProgressIndicator

可以用于下载进度。
请添加图片描述

class MyState extends State {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(""), centerTitle: true),body: Column(children: [//未设置value，动态显示LinearProgressIndicator(backgroundColor: Colors.red,valueColor: AlwaysStoppedAnimation(Colors.green),),Divider(color: Colors.white, height: 20),LinearProgressIndicator(backgroundColor: Colors.red,value: 0.3,valueColor: AlwaysStoppedAnimation(Colors.green),),],),);}
}

CircularProgressIndicator

请添加图片描述


import 'package:flutter/material.dart';void main() {runApp(MyPage());
}class MyPage extends StatelessWidget {const MyPage({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(theme: ThemeData(), home: MyFul());}
}class MyState extends State {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(""), centerTitle: true),body: Column(children: [//未设置value，动态显示CircularProgressIndicator(),Divider(color: Colors.white, height: 20),CircularProgressIndicator(value: 0.7, strokeWidth: 10),//strokeWidth设置粗细],),);}
}class MyFul extends StatefulWidget {@overrideState<StatefulWidget> createState() {return MyState();}
}