174 lines
4.8 KiB
Dart
174 lines
4.8 KiB
Dart
import 'package:flisp_app/models/flisp.dart';
|
|
import 'package:flisp_app/provider/flisp_provider.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_form_builder/flutter_form_builder.dart';
|
|
import 'package:provider/provider.dart';
|
|
|
|
class FlispForm extends StatefulWidget {
|
|
final GlobalKey<FormBuilderState> formKey;
|
|
final bool isEditing;
|
|
final Flisp? initialFlisp;
|
|
|
|
const FlispForm({
|
|
super.key,
|
|
required this.formKey,
|
|
required this.isEditing,
|
|
this.initialFlisp,
|
|
});
|
|
|
|
@override
|
|
State<FlispForm> createState() => _FlispFormState();
|
|
}
|
|
|
|
class _FlispFormState extends State<FlispForm> {
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final int maxContentCount = 30;
|
|
final provider = Provider.of<FlispProvider>(context);
|
|
|
|
Widget buildTitle() {
|
|
return Row(
|
|
children: [
|
|
Icon(
|
|
widget.isEditing ? Icons.edit_note : Icons.add_task,
|
|
color: Colors.orange,
|
|
size: 24,
|
|
),
|
|
SizedBox(width: 8),
|
|
Text(
|
|
widget.isEditing ? '编辑闪灵' : '添加闪灵',
|
|
style: TextStyle(
|
|
fontSize: 20,
|
|
fontWeight: FontWeight.bold,
|
|
color: Colors.orange,
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
FormBuilderTextField buildContentField() {
|
|
return FormBuilderTextField(
|
|
name: 'content',
|
|
initialValue: provider.formItem.content,
|
|
onChanged: (value) {
|
|
setState(() {
|
|
provider.formItem.content = value ?? '';
|
|
});
|
|
},
|
|
decoration: InputDecoration(
|
|
labelText: '内容',
|
|
hintText: '请输入闪灵内容...',
|
|
counterText: '',
|
|
suffixText: '${provider.formItem.content.length}/$maxContentCount',
|
|
border: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(12),
|
|
borderSide: BorderSide(color: Colors.grey.shade200),
|
|
),
|
|
enabledBorder: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(12),
|
|
borderSide: BorderSide(color: Colors.grey.shade200),
|
|
),
|
|
focusedBorder: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(12),
|
|
borderSide: BorderSide(color: Colors.orange),
|
|
),
|
|
filled: true,
|
|
fillColor: Colors.white,
|
|
prefixIcon: Icon(Icons.description, color: Colors.green),
|
|
contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 14),
|
|
),
|
|
maxLines: 3,
|
|
maxLength: maxContentCount,
|
|
validator: (value) {
|
|
if (value != null && value.length > maxContentCount) {
|
|
return '内容不能超过$maxContentCount个字符';
|
|
}
|
|
return null;
|
|
},
|
|
);
|
|
}
|
|
|
|
FormBuilderRadioGroup builderRadioGroup() {
|
|
return FormBuilderRadioGroup<FlispTag>(
|
|
name: 'tag',
|
|
initialValue: provider.formItem.tag,
|
|
decoration: InputDecoration(
|
|
border: InputBorder.none,
|
|
contentPadding: EdgeInsets.zero,
|
|
),
|
|
orientation: OptionsOrientation.horizontal,
|
|
wrapSpacing: 6,
|
|
options:
|
|
FlispTag.values.map((priority) {
|
|
return FormBuilderFieldOption<FlispTag>(
|
|
value: priority,
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [Text(priority.label)],
|
|
),
|
|
);
|
|
}).toList(),
|
|
onChanged: (value) {
|
|
if (value != null) {
|
|
setState(() {
|
|
provider.formItem.tag = value;
|
|
});
|
|
}
|
|
},
|
|
);
|
|
}
|
|
|
|
Container buildTagField() {
|
|
return Container(
|
|
decoration: BoxDecoration(
|
|
color: Colors.white,
|
|
borderRadius: BorderRadius.circular(12),
|
|
border: Border.all(color: Colors.grey.shade300, width: 1),
|
|
),
|
|
padding: EdgeInsets.all(12),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
Icon(Icons.category, color: Colors.orange),
|
|
SizedBox(width: 6),
|
|
Text('分类'),
|
|
],
|
|
),
|
|
builderRadioGroup(),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
FormBuilder buildForm() {
|
|
return FormBuilder(
|
|
key: widget.formKey,
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
buildContentField(),
|
|
SizedBox(height: 12),
|
|
buildTagField(),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
return Padding(
|
|
padding: const EdgeInsets.all(16),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [buildTitle(), SizedBox(height: 20), buildForm()],
|
|
),
|
|
);
|
|
}
|
|
}
|