Flutter 中的圆形和线性进度指示器
Flutter 中的进度指示器是什么?
进度指示器用于显示 Android 应用程序中正在执行的特定任务的当前进度。例如，我们正在从互联网加载数据或进行 API 调用。在这种情况下，为了处理加载任务，我们会在应用程序中显示进度指示器，以告知用户数据正在加载。我们可以在应用程序中显示两种类型的进度指示器。
线性进度指示器 - 此指示器用于显示线性进度条，该进度条显示任务的当前进度。
圆形进度指示器 - 此指示器类似于圆形进度条，用于显示 Android 应用程序中特定任务的进度。
圆形和线性进度指示器的实现
我们将创建一个简单的应用程序，用于在我们的 Android 应用程序中显示圆形和线性进度指示器。我们将按照分步指南在 Android 应用程序中实现 Toast 消息。
步骤 1:在 Android Studio 中创建一个新的 Flutter 项目
如下图所示，导航到 Android Studio。在下面的屏幕中，点击"新建项目"以创建一个新的 Flutter 项目。
点击"新建项目"后，您将看到以下屏幕。
在此屏幕中，您必须选择"Flutter 应用程序"，然后点击"下一步"，您将看到以下屏幕。
在此屏幕中，您必须指定项目名称然后点击"下一步"即可
步骤 2:使用 main.dart 文件
导航到您的项目>lib>main.dart 文件，并向其中添加以下代码。代码中添加了注释，以便您详细了解。
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
// 在下面一行为我们的应用程序添加标题。
title: 'Flutter Demo',
// 在下面一行中指定我们应用程序的主题数据
theme: ThemeData(
primarySwatch: Colors.blue,
),
// 在下面一行中调用我们的主页。
home: MyHomePage(),
// 在下面一行禁用我们的调试检查模式横幅
debugShowCheckedModeBanner: false,
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
@override
Widget build(BuildContext context) {
return Scaffold(
// 在下面为我们的应用程序创建应用栏
appBar: AppBar(
// 在我们的应用栏中指定文本
title: Text("Android Application"),
),
// 为其添加填充。
body: Padding(
padding: const EdgeInsets.all(16.0),
// 将我们的列包裹到屏幕的中心。
child: Center(
child: Column(
// 将列对齐到下一行。
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
// 在下行指定主轴尺寸。
mainAxisSize: MainAxisSize.min,
// 创建子项以显示在下一行。
children: const <Widget>[
// 在下方的行上创建圆形动画的文本。
Text(
"Progress Indicator in Flutter",
// 指定文本对齐方式、最大行数、文本样式
textAlign: TextAlign.center,
maxLines: 1,
style: TextStyle(
color: Colors.black,
fontSize: 20.0,
fontWeight: FontWeight.bold),
),
// 在下方创建一个大小合适的框。
SizedBox(
height: 30,
),
Text(
"Linear Progress Indicator",
// 指定文本对齐方式、最大行数、文本样式
textAlign: TextAlign.center,
maxLines: 1,
style: TextStyle(
color: Colors.black,
fontSize: 20.0,
fontWeight: FontWeight.bold),
),
SizedBox(
height: 20,
),
// 在下方创建一个线性进度条。
LinearProgressIndicator(),
// 在下方创建一个大小合适的框
SizedBox(
height: 40,
),
Text(
"Circular Progress Indicator",
// 指定文本对齐方式、最大行数、文本样式
textAlign: TextAlign.center,
maxLines: 1,
style: TextStyle(
color: Colors.black,
fontSize: 20.0,
fontWeight: FontWeight.bold),
),
// 在下方创建一个大小合适的框
SizedBox(
height: 20,
),
// 在下行创建一个圆形进度条。
CircularProgressIndicator(),
],
),
),
),
);
}
}
说明− 在上面的代码中，我们可以看到主方法，在该方法中我们调用了 MyApp 类，该类我们将在下面创建为一个无状态窗口小部件。在这个无状态窗口小部件中，我们创建了一个构建方法，并在该方法中返回我们的 Material App。在 Material App 中，我们指定了应用标题、应用主题和主页，这些都需要与调试检查模式横幅一起显示，并且设置为 false。
之后，我们创建一个 Home Page 状态方法，它将扩展 Home Page 的状态。之后，我们创建一个构建方法，在其中指定应用栏并为其添加标题。之后，我们从各个方向为屏幕添加内边距。然后，我们将应用程序中的所有子项添加到屏幕的中心。在其中，我们指定了列。在此列中，我们创建了不同的子项，它们将以垂直方式对齐。在此列中，我们首先创建一个文本小部件来显示应用标题。
之后，我们创建一个可调整大小的框小部件，用于在两个小部件之间添加间隙。然后，我们再次创建一个文本小部件，在其中将文本显示为线性进度指示器。之后，我们指定一个可调整大小的框，然后创建线性进度指示器。创建此线性进度指示器后，我们再次指定一个可调整大小的框，然后创建一个文本小部件，将文本显示为圆形进度指示器。在此小部件之后，我们将创建一个大小合适的框，并在其后显示一个圆形进度指示器。
添加上述代码后，现在只需点击顶部栏中的绿色图标即可在移动设备上运行我们的应用程序。
注意 - 确保您已连接到真实设备或模拟器。
结论
在以上教程中，我们了解了 Flutter 中的进度指示器是什么，以及如何在 Flutter 应用程序中使用圆形和线性进度指示器。
