该代码定义了一个Flutter应用,展示了进度指示器(CircularProgressIndicator 和 LinearProgressIndicator)以及单选按钮(Radio)的使用。用户可以通过勾选复选框来控制进度指示器的动画,并通过单选按钮选择不同的选项。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Progress Indicators with Radio Buttons Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
bool _isChecked = false;
late AnimationController _controller;
int _radioValue = 0;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: Duration(seconds: 2),
)..addListener(() {
setState(() {});
});
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
void _onCheckboxChanged(bool? value) {
setState(() {
_isChecked = value ?? false;
if (_isChecked) {
_controller.repeat(reverse: true);
} else {
_controller.stop();
}
});
}
void _handleRadioValueChanged(int? value) {
setState(() {
_radioValue = value ?? 0;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Progress Indicators with Radio Buttons Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Checkbox(
value: _isChecked,
onChanged: _onCheckboxChanged,
),
SizedBox(height: 20),
CircularProgressIndicator(
value: _controller.value,
),
SizedBox(height: 20),
LinearProgressIndicator(
value: _controller.value,
),
SizedBox(height: 20),
// Radio buttons for demonstration
Text('Choose an option:'),
Radio<int>(
value: 0,
groupValue: _radioValue,
onChanged: _handleRadioValueChanged,
),
Text('Option 1'),
Radio<int>(
value: 1,
groupValue: _radioValue,
onChanged: _handleRadioValueChanged,
),
Text('Option 2'),
Radio<int>(
value: 2,
groupValue: _radioValue,
onChanged: _handleRadioValueChanged,
),
Text('Option 3'),
],
),
),
);
}
}
以下是对这段代码的分析:
一、整体结构
这段代码是一个使用 Flutter 框架构建的应用程序,展示了进度指示器(圆形和线性)与单选按钮的结合使用,并通过复选框控制进度指示器的动画。
二、主要部分分析
main函数
void main() { runApp(MyApp()); }:应用程序的入口点,启动应用并传入MyApp实例。
MyApp类
继承自StatelessWidget,在build方法中返回一个MaterialApp,设置了应用的标题、主题颜色和主页面为MyHomePage。
MyHomePage类
继承自StatefulWidget,在createState方法中返回_MyHomePageState。
_MyHomePageState类
与SingleTickerProviderStateMixin混合,用于提供动画控制器的vsync。
维护一个布尔变量_isChecked表示复选框是否被选中,一个AnimationController类型的_controller用于控制进度指示器的动画,以及一个整数_radioValue表示单选按钮的值。
initState方法:
初始化动画控制器,设置动画时长为 2 秒,并添加监听器,当动画值变化时调用setState触发界面更新。
dispose方法:释放动画控制器资源。
_onCheckboxChanged方法:
处理复选框状态变化,当复选框被选中时,启动动画控制器并设置反向重复播放;当复选框未选中时,停止动画控制器。
_handleRadioValueChanged方法:
处理单选按钮值变化,更新_radioValue。
build方法:
构建应用的界面,包括一个Scaffold,其中有一个AppBar显示标题,主体是一个Column布局,包含一个复选框、一定间距、圆形进度指示器、线性进度指示器、文本和三个单选按钮及其对应的文本。进度指示器的value属性绑定到动画控制器的当前值_controller.value,单选按钮的groupValue和onChanged属性分别绑定到_radioValue和_handleRadioValueChanged方法。
三、功能总结
这个应用程序展示了如何使用 Flutter 的进度指示器和单选按钮,并通过复选框控制进度指示器的动画。用户可以勾选复选框来启动或停止进度指示器的动画,同时可以通过单选按钮选择不同的选项。这种设计提供了一种交互方式,展示了 Flutter 中动画和用户输入的结合使用。