Flutter macOS平台任务栏进度显示插件macos_dock_progress的使用
Flutter macOS平台任务栏进度显示插件macos_dock_progress的使用
使用说明
请参阅 示例。
命令Swift编译失败
如果您遇到Swift编译失败的问题，请按照以下步骤操作：
配置macOS部署目标 (MACOSX_DEPLOYMENT_TARGET) 以适应Pod
在 macos/Podfile 文件中添加以下内容：
# macos/Podfile
post_install do |installer|
installer.pods_project.targets.each do |target|
flutter_additional_macos_build_settings(target)
# 添加以下行
target.build_configurations.each do |config|
config.build_settings['MACOSX_DEPLOYMENT_TARGET'] = '10.14' # >=10.13
end
end
end
禁用Swift编译器优化
- 在Xcode中打开
macos/Runner.xcodeproj - 导航到
Runner>Build Settings>Swift Compiler - Code Generation - 将优化级别设置为
No Optimization [-Onone]
完整示例代码
以下是完整的示例代码，展示了如何使用 macos_dock_progress 插件来在macOS任务栏中显示进度条。
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:macos_dock_progress/macos_dock_progress.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({super.key});
[@override](/user/override)
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
double _progressValue = 0.0;
String style = "ProgressBarStyle.bar";
final TextEditingController _badgeInput = TextEditingController(text: "0");
final TextEditingController _radiusInput = TextEditingController(text: "55");
double _alphaValue = CupertinoColors.systemBlue.alpha / 255;
double _redValue = CupertinoColors.systemBlue.red / 255;
double _greenValue = CupertinoColors.systemBlue.green / 255;
double _blueValue = CupertinoColors.systemBlue.blue / 255;
// 获取颜色
Color _getColor() => Color.fromARGB(
(_alphaValue * 255).round(),
(_redValue * 255).round(),
(_greenValue * 255).round(),
(_blueValue * 255).round(),
);
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Dock Progress Bar Example'),
),
body: SafeArea(
child: Padding(
padding: const EdgeInsets.all(20),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
// 进度条
Column(
children: [
Text("Progress: ${(_progressValue * 100).toStringAsFixed(1)}%"),
Slider(
onChanged: (value) async {
await DockProgress.setProgress(value);
_progressValue = await DockProgress.getProgress() ?? 0;
setState(() {});
},
max: 1.0,
min: 0.0,
value: _progressValue,
),
ElevatedButton(
onPressed: () async {
await DockProgress.resetProgress();
setState(() {
_progressValue = 0;
});
},
child: const Text("Reset Progress"),
),
],
),
// 颜色调整
Column(
children: [
const Text("Color"),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(
width: 60,
child: Text("Alpha: "),
),
Expanded(
child: Slider(
onChanged: (value) async {
setState(() {
_alphaValue = value;
});
},
max: 1.0,
min: 0.0,
value: _alphaValue,
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(
width: 60,
child: Text("Red: "),
),
Expanded(
child: Slider(
onChanged: (value) async {
setState(() {
_redValue = value;
});
},
max: 1.0,
min: 0.0,
value: _redValue,
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(
width: 60,
child: Text("Green: "),
),
Expanded(
child: Slider(
onChanged: (value) async {
setState(() {
_greenValue = value;
});
},
max: 1.0,
min: 0.0,
value: _greenValue,
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(
width: 60,
child: Text("Blue: "),
),
Expanded(
child: Slider(
onChanged: (value) async {
setState(() {
_blueValue = value;
});
},
max: 1.0,
min: 0.0,
value: _blueValue,
),
),
],
),
],
),
// 样式选择
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Style: $style"),
const SizedBox(
height: 16,
),
OutlinedButton(
onPressed: () {
DockProgress.changeStyle(ProgressBarStyle.bar());
style = "ProgressBarStyle.bar";
setState(() {});
},
child: const Text("ProgressBarStyle.bar"),
),
const SizedBox(
height: 16,
),
OutlinedButton(
onPressed: () {
DockProgress.changeStyle(
ProgressBarStyle.squircle(color: _getColor()));
style = "ProgressBarStyle.squircle";
setState(() {});
},
child: const Text("ProgressBarStyle.squircle"),
),
const SizedBox(
height: 16,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
OutlinedButton(
onPressed: () {
style = "ProgressBarStyle.circle";
DockProgress.changeStyle(ProgressBarStyle.circle(
color: _getColor(),
radius: double.tryParse(_radiusInput.text) ?? 0));
setState(() {});
},
child: const Text("ProgressBarStyle.circle"),
),
const SizedBox(
width: 10,
),
SizedBox(
width: 200,
child: TextField(
controller: _radiusInput,
keyboardType: TextInputType.number,
onChanged: (value) {
DockProgress.changeStyle(ProgressBarStyle.circle(
color: _getColor(),
radius: double.tryParse(value) ?? 0));
style = "ProgressBarStyle.circle";
setState(() {});
},
decoration: const InputDecoration(
focusedBorder: OutlineInputBorder(),
enabledBorder: OutlineInputBorder(),
label: Text("Radius"),
),
),
),
],
),
const SizedBox(
height: 16,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
OutlinedButton(
onPressed: () {
style = "ProgressBarStyle.badge";
DockProgress.changeStyle(ProgressBarStyle.badge(
int.tryParse(_badgeInput.text) ?? 0,
color: _getColor()));
setState(() {});
},
child: const Text("ProgressBarStyle.badge"),
),
const SizedBox(
width: 10,
),
SizedBox(
width: 200,
child: TextField(
controller: _badgeInput,
keyboardType: TextInputType.number,
onChanged: (value) {
DockProgress.changeStyle(ProgressBarStyle.badge(
int.tryParse(value) ?? 0,
color: _getColor()));
style = "ProgressBarStyle.badge";
setState(() {});
},
decoration: const InputDecoration(
focusedBorder: OutlineInputBorder(),
enabledBorder: OutlineInputBorder(),
label: Text("Badge Value"),
),
),
),
],
),
],
),
],
),
),
),
),
),
);
}
}
更多关于Flutter macOS平台任务栏进度显示插件macos_dock_progress的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter macOS平台任务栏进度显示插件macos_dock_progress的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，以下是如何在Flutter应用中使用macos_dock_progress插件来在macOS平台的任务栏上显示进度的一个代码示例。
首先，确保你已经在pubspec.yaml文件中添加了macos_dock_progress依赖：
dependencies:
flutter:
sdk: flutter
macos_dock_progress: ^0.x.x # 请使用最新版本号
然后运行flutter pub get来安装依赖。
接下来，在macOS平台上，你需要进行一些特定的设置来启用任务栏进度显示。以下是一个完整的示例，展示如何在Flutter应用中实现这一点。
- 主应用代码（main.dart）：
import 'package:flutter/material.dart';
import 'package:macos_dock_progress/macos_dock_progress.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter macOS Dock Progress Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: DockProgressDemo(),
);
}
}
class DockProgressDemo extends StatefulWidget {
@override
_DockProgressDemoState createState() => _DockProgressDemoState();
}
class _DockProgressDemoState extends State<DockProgressDemo> {
MacosDockProgress? _dockProgress;
double _progress = 0.0;
@override
void initState() {
super.initState();
// 初始化MacosDockProgress实例
_dockProgress = MacosDockProgress();
// 开始一个定时器来模拟进度更新
Timer.periodic(Duration(seconds: 1), (timer) {
setState(() {
_progress = (_progress + 0.1).clamp(0.0, 1.0);
if (_progress == 1.0) {
timer.cancel();
}
// 更新任务栏进度
_dockProgress?.setProgress(_progress);
});
});
}
@override
void dispose() {
// 清理资源
_dockProgress?.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('macOS Dock Progress Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Progress: ${(_progress * 100).toStringAsFixed(1)}%',
style: TextStyle(fontSize: 24),
),
],
),
),
);
}
}
- 在
Info.plist中添加必要的权限（如果需要）：
通常，macos_dock_progress插件不需要特别的Info.plist权限，但为了确保应用的正常运行，你可能需要确认你的应用有适当的权限设置。
- 确保在macOS上运行：
这个插件仅在macOS平台上有效，因此确保你在macOS设备或模拟器上运行你的Flutter应用。
- 运行应用：
使用flutter run命令来运行你的应用，你应该会在macOS的任务栏上看到进度条的更新。
这个示例展示了如何使用macos_dock_progress插件来在macOS的任务栏上显示进度。通过定时器模拟进度更新，每次更新时调用_dockProgress?.setProgress(_progress)来设置新的进度值。注意在实际应用中，你可能需要根据具体的业务逻辑来更新进度值。
