Flutter自定义组件插件awesome_nizam_widgets的使用
Flutter 自定义组件插件 awesome_nizam_widgets 的使用
在本教程中，我们将详细介绍如何使用 awesome_nizam_widgets 插件来构建一个审批相关的视图。该插件提供了丰富的自定义组件，使开发更加便捷。
功能
- 接受审批
- 点击 PDF
- 搜索功能等
开始使用
无需任何前置条件即可开始使用该插件。
使用示例
以下是一个完整的示例代码，展示了如何使用 awesome_nizam_widgets 插件来构建一个审批表单页面。
import 'package:flutter/material.dart';
import 'package:get/get.dart';
// 假设已经定义了以下控制器
class Form926Controller extends GetxController {
// 控制搜索框是否显示
RxBool isSearching = false.obs;
// 搜索控制器
TextEditingController searchController = TextEditingController();
// 开始日期
Rx<DateTime> startDate = DateTime.now().obs;
// 结束日期
Rx<DateTime> endDate = DateTime.now().obs;
// 审批状态组值
Rx<String> statusGroupValue = 'W'.obs;
// 审批列表
Rx<List<dynamic>> approvalList = [].obs;
// 搜索列表
Rx<List<dynamic>> searchList = [].obs;
void onChangeWhenTypeSearch(String text) {
// 处理搜索逻辑
}
void setStatusGroupValue(String value) {
// 设置状态组值
statusGroupValue.value = value;
}
void onTapStartDateTime(BuildContext context) {
// 处理开始日期点击事件
}
void onTapEndDateTime(BuildContext context) {
// 处理结束日期点击事件
}
void getSupplierBillApprovalList() {
// 获取供应商审批列表
}
void showApprovalForm(dynamic approval) {
// 显示审批表单
}
void showReport(dynamic approval) {
// 显示报告
}
}
// 审批摘要卡片组件
class ApprovalSummaryCard extends StatelessWidget {
final List<String> titles;
final List<String> values;
final VoidCallback onTapFunction;
final VoidCallback acceptTap;
final VoidCallback pdfTap;
ApprovalSummaryCard({
required this.titles,
required this.values,
required this.onTapFunction,
required this.acceptTap,
required this.pdfTap,
});
@override
Widget build(BuildContext context) {
return Card(
child: ListTile(
title: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: List.generate(titles.length, (index) {
return Text('${titles[index]}: ${values[index]}');
}),
),
trailing: Row(
mainAxisSize: MainAxisSize.min,
children: [
ElevatedButton(
onPressed: acceptTap,
child: Text('接受'),
),
SizedBox(width: 8),
ElevatedButton(
onPressed: pdfTap,
child: Text('PDF'),
),
],
),
onTap: onTapFunction,
),
);
}
}
// 主页面
class Form926View extends GetView<Form926Controller> {
const Form926View({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey.shade200,
appBar: AppBar(
title: Obx(
() => Row(
children: [
controller.isSearching.value
? Expanded(
child: TextFormField(
controller: controller.searchController,
style: const TextStyle(color: Colors.white),
decoration: const InputDecoration(
fillColor: Colors.transparent,
hintText: 'Search',
hintStyle: TextStyle(color: Colors.white),
),
onChanged: controller.onChangeWhenTypeSearch,
),
)
: Expanded(
child: GestureDetector(
onTap: () => controller.isSearching.value = !controller.isSearching.value,
child: const Text('Bill Approval'),
),
),
],
),
),
actions: [
Obx(
() => IconButton(
onPressed: () {
if (controller.isSearching.value) {
controller.searchController.clear();
controller.searchList.value = null;
}
controller.isSearching.value = !controller.isSearching.value;
},
icon: Icon(controller.isSearching.value ? Icons.close : Icons.search),
),
),
],
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Card(
margin: EdgeInsets.zero,
child: Padding(
padding: const EdgeInsets.all(10),
child: Column(
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: InkWell(
onTap: () => controller.onTapStartDateTime(context),
child: Container(
height: 50,
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(color: Colors.grey.shade200, border: Border.all()),
alignment: Alignment.center,
child: Obx(
() => Text(
getFormatedDate(controller.startDate.value),
textAlign: TextAlign.center,
style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
),
),
),
),
),
Expanded(
child: InkWell(
onTap: () => controller.onTapEndDateTime(context),
child: Container(
height: 50,
alignment: Alignment.center,
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(color: Colors.grey.shade200, border: Border.all()),
child: Obx(
() => Text(
getFormatedDate(controller.endDate.value),
textAlign: TextAlign.center,
style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
),
),
),
),
),
Container(
height: 50,
decoration: BoxDecoration(border: Border.all(color: Colors.black), color: Colors.green),
child: IconButton(onPressed: controller.getSupplierBillApprovalList, icon: const Icon(Icons.search, color: Colors.white)),
),
],
),
Obx(
() => Row(
children: [
Radio<String>(
value: 'W',
groupValue: controller.statusGroupValue.value,
onChanged: controller.setStatusGroupValue,
),
const Text('Pending'),
Radio<String>(
value: 'A',
groupValue: controller.statusGroupValue.value,
onChanged: controller.setStatusGroupValue,
),
const Text('Approved'),
Radio<String>(
value: 'H',
groupValue: controller.statusGroupValue.value,
onChanged: controller.setStatusGroupValue,
),
const Text('Denied'),
const Spacer(),
Text(
'${(controller.isSearching.value) ? (controller.searchList.value?.length ?? 0) : controller.approvalList.value.length}',
style: const TextStyle(color: Colors.grey, fontSize: 12, fontWeight: FontWeight.bold),
),
],
),
)
],
),
),
),
const SizedBox(height: 10),
Expanded(
child: Obx(
() => (controller.approvalList.value.isEmpty)
? Center(child: Text('No Data'))
: controller.searchList.value == null
? ListView.builder(
padding: const EdgeInsets.symmetric(horizontal: 10),
itemCount: controller.approvalList.value.length,
itemBuilder: (BuildContext context, int index) {
final approval = controller.approvalList.value[index];
return ApprovalSummaryCard(
titles: const ['Bill No', 'Supplier', 'Prepared By', 'Status'],
values: [
approval['BILL_ID'] ?? '',
approval['SUPPLIER'] ?? '',
approval['PREPARED_BY_NAME'] ?? '',
approval['TASK_NAME'] ?? '',
],
onTapFunction: () => Get.to(() => Form926DetailsView(approval: approval)),
acceptTap: () => controller.showApprovalForm(approval),
pdfTap: () => controller.showReport(approval),
);
},
)
: controller.searchList.value!.isEmpty
? Center(child: Text('No Search Results'))
: ListView.builder(
padding: const EdgeInsets.symmetric(horizontal: 10),
itemCount: controller.searchList.value?.length,
itemBuilder: (BuildContext context, int index) {
final approval = controller.searchList.value![index];
return ApprovalSummaryCard(
titles: const ['Bill No', 'Supplier', 'Prepared By', 'Status'],
values: [
approval['BILL_ID'] ?? '',
approval['SUPPLIER'] ?? '',
approval['PREPARED_BY_NAME'] ?? '',
approval['TASK_NAME'] ?? '',
],
onTapFunction: () => Get.to(() => Form926DetailsView(approval: approval)),
acceptTap: () => controller.showApprovalForm(approval),
pdfTap: () => controller.showReport(approval),
);
},
),
),
),
],
),
);
}
}
注意事项
确保你已经在项目中添加了 awesome_nizam_widgets 插件，并且正确配置了依赖项。
dependencies:
flutter:
sdk: flutter
awesome_nizam_widgets: ^1.0.0
更多关于Flutter自定义组件插件awesome_nizam_widgets的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
