Flutter极简风格UI插件flutter_minimalist的使用
Flutter极简风格UI插件flutter_minimalist的使用
特性
- 功能作为扩展。
- 极简代码。
- 最大化生产力。
- 更有意义且可读的代码结构。
开始使用
在你的 pubspec.yaml
文件中添加依赖:
dependencies:
flutter:
sdk: flutter
# 添加 flutter_minimalist
flutter_minimalist: ^1.0.0 # 请替换为最新版本号
然后运行 flutter pub get
来获取新的依赖。
使用方法
间距
对于 Row()
或 Column()
小部件内的间距(如边距或填充),可以直接调用 num
类型的 getter。
Column(
children: [
16.verticalSpace, // 等效于 SizedBox(height: 16)
/// 其他一些小部件
16.verticalSpace, // 等效于 SizedBox(height: 16)
Row(
children: [
16.horizontalSpace, // 等效于 SizedBox(width: 16)
// 其他一些小部件
16.horizontalSpace, // 等效于 SizedBox(width: 16)
// 其他一些小部件
]
),
]
)
边距和填充
对于所有方向的填充和边距,可以直接调用 num
类型的 getter。
Container(
padding: 16.allPadding, // 等效于 EdgeInsets.all(16)
margin: 16.allMargin, // 等效于 EdgeInsets.all(16)
)
// 对于单个方向的填充和边距
Container(
padding: 16.leftPadding, // 等效于 EdgeInsets.only(left: 16)
margin: 16.leftMargin, // 等效于 EdgeInsets.only(left: 16)
)
Duration简化
可以简化 Duration
的创建方式:
void example(){
1.seconds; // 等效于 Duration(seconds: 1)
1000.milliSeconds; // 等效于 Duration(milliseconds: 1000)
1000000.microSeconds; // 等效于 Duration(microseconds: 1000000)
2.minutes; // 等效于 Duration(minutes: 2)
1.hours; // 等效于 Duration(hours: 1)
}
Future.delay简化
可以更简洁地使用 Future.delay
:
void example() {
1000.milliSeconds.delay.then((val){
// 在延迟1秒后执行的操作
});
}
贡献
欢迎贡献!如果您想贡献,请到 GitHub 上 fork 仓库并提交拉取请求。
问题反馈
如果您遇到任何问题或错误,请自由地在 GitHub Issue Tracker 中报告。我们会尽快处理。
支持
如果您有任何问题或需要帮助,请联系 saiful161003@gmail.com。
许可证
该包在 MIT 许可下发布。
示例代码
import 'package:flutter/material.dart';
import 'package:flutter_minimalist/flutter_minimalist.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// 这个小部件是您的应用的根
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Example'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
[@override](/user/override)
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
16.verticalSpace, // 等效于 SizedBox(height: 16)
Container(
padding: 16.allPadding, // 等效于 EdgeInsets.all(16)
margin: 16.allMargin, // 等效于 EdgeInsets.all(16)
child: const Text('Be a Minimalist'),
),
],
),
);
}
}
更多关于Flutter极简风格UI插件flutter_minimalist的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复