Cxx0822/flisp_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:更新闪灵弹窗模块

Browse Source
This commit is contained in:
Cxx0822
2025-11-10 10:58:08 +08:00
parent 98248bf1ad
commit e84be63d9f
11 changed files with 383 additions and 537 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
lib/widgets/common.dart
View File

@@ -24,3 +24,78 @@ Container buildCard({Widget? child}) {
child: child,
);
}
void buildModalBottom({
required BuildContext context,
required String title,
required Widget body,
}) {
showModalBottomSheet(
context: context,
isScrollControlled: true,
backgroundColor: Colors.transparent,
builder: (BuildContext context) {
return GestureDetector(
onTap: () => Navigator.of(context).pop(),
child: Container(
color: Color.fromRGBO(0, 0, 0, 0.001),
child: GestureDetector(
onTap: () {},
child: DraggableScrollableSheet(
initialChildSize: 0.6,
minChildSize: 0.4,
maxChildSize: 0.9,
builder: (_, controller) {
return Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(24),
topRight: Radius.circular(24),
),
),
child: buildModalBottomBody(context, title, body),
);
},
),
),
),
);
},
);
}
Widget buildModalBottomBody(BuildContext context, String title, Widget body) {
return Column(
children: [
// 拖拽指示条
Container(
margin: EdgeInsets.only(top: 12, bottom: 4),
width: 48,
height: 4,
decoration: BoxDecoration(
color: Colors.grey[400],
borderRadius: BorderRadius.circular(2),
),
),
// 标题栏
Padding(
padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
title,
style: TextStyle(fontSize: 20, fontWeight: FontWeight.w700),
),
],
),
),
Divider(height: 1, thickness: 1),
Expanded(child: Padding(padding: EdgeInsets.all(12), child: body)),
],
);
}

273
lib/widgets/flisp_form.dart
View File

@@ -8,11 +8,13 @@ class FlispForm extends StatefulWidget {
final GlobalKey<FormBuilderState> formKey;
final bool isEditing;
final Flisp? initialFlisp;
final VoidCallback onOk;
const FlispForm({
super.key,
required this.formKey,
required this.isEditing,
required this.onOk,
this.initialFlisp,
});
@@ -28,30 +30,9 @@ class _FlispFormState extends State<FlispForm> {
@override
Widget build(BuildContext context) {
final int maxContentCount = 30;
final int maxContentCount = 100;
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',
@@ -62,8 +43,7 @@ class _FlispFormState extends State<FlispForm> {
});
},
decoration: InputDecoration(
labelText: '内容',
hintText: '请输入闪灵内容...',
hintText: '记录你的灵感瞬间...',
counterText: '',
suffixText: '${provider.formItem.content.length}/$maxContentCount',
border: OutlineInputBorder(
@@ -80,12 +60,16 @@ class _FlispFormState extends State<FlispForm> {
),
filled: true,
fillColor: Colors.white,
prefixIcon: Icon(Icons.description, color: Colors.green),
contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 14),
),
maxLines: 3,
minLines: 4,
maxLines: 8,
maxLength: maxContentCount,
validator: (value) {
if (value != null && value.isEmpty) {
return '请输入内容';
}
if (value != null && value.length > maxContentCount) {
return '内容不能超过$maxContentCount个字符';
}
@@ -94,79 +78,208 @@ class _FlispFormState extends State<FlispForm> {
);
}
FormBuilderRadioGroup builderRadioGroup() {
return FormBuilderRadioGroup<FlispTag>(
name: 'tag',
initialValue: provider.formItem.tag,
decoration: InputDecoration(
border: InputBorder.none,
contentPadding: EdgeInsets.zero,
// 图标按钮组件
Widget buildIconButton({
required IconData icon,
required Color color,
required VoidCallback onTap,
}) {
return GestureDetector(
onTap: onTap,
child: Container(
width: 32,
height: 32,
decoration: BoxDecoration(
color: color.withAlpha(50),
borderRadius: BorderRadius.circular(8),
border: Border.all(color: color.withAlpha(80), width: 1),
),
child: Icon(icon, size: 18, color: color),
),
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() {
Widget buildBottomButton() {
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,
padding: EdgeInsets.only(top: 16),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
// 功能图标区域
Row(
children: [
Icon(Icons.category, color: Colors.orange),
SizedBox(width: 6),
Text('分类'),
// 上传图片按钮
buildIconButton(
icon: Icons.photo_library_rounded,
color: Colors.blue,
onTap: () {
// 上传图片功能
},
),
SizedBox(width: 12),
// 选择标签按钮
buildIconButton(
icon: Icons.local_offer_rounded,
color: Colors.orange,
onTap: () {
// 选择标签功能
},
),
],
),
builderRadioGroup(),
// 确认按钮（箭头形状）
Container(
width: 48,
height: 48,
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
borderRadius: BorderRadius.circular(24),
border: Border.all(color: Theme.of(context).primaryColor, width: 1),
),
child: IconButton(
icon: Icon(Icons.arrow_forward_rounded, size: 24),
color: Colors.white,
onPressed: () => widget.onOk(),
),
),
],
),
);
}
FormBuilder buildForm() {
return FormBuilder(
key: widget.formKey,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
buildContentField(),
SizedBox(height: 12),
buildTagField(),
],
),
// 选择的标签显示
Widget buildSelectedTags() {
// 模拟选择的标签
final selectedTags = ['旅行', '美食'];
if (selectedTags.isEmpty) return SizedBox();
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 8),
Wrap(
spacing: 8,
runSpacing: 8,
children:
selectedTags.map((tag) {
return Container(
padding: EdgeInsets.symmetric(horizontal: 12, vertical: 6),
decoration: BoxDecoration(
color: Colors.orange.withOpacity(0.1),
borderRadius: BorderRadius.circular(16),
border: Border.all(color: Colors.orange.withOpacity(0.3)),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(
tag,
style: TextStyle(
fontSize: 12,
color: Colors.orange,
fontWeight: FontWeight.w500,
),
),
SizedBox(width: 4),
GestureDetector(
onTap: () {
// 删除标签
},
child: Icon(
Icons.close,
size: 14,
color: Colors.orange,
),
),
],
),
);
}).toList(),
),
SizedBox(height: 12),
],
);
}
return Padding(
padding: const EdgeInsets.all(16),
// 图片预览
Widget buildImagePreview() {
// 模拟上传的图片
final imageItems = [
{'name': 'photo1.jpg'},
];
if (imageItems.isEmpty) return SizedBox();
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Wrap(
spacing: 8,
runSpacing: 8,
children:
imageItems.map((image) {
return Container(
padding: EdgeInsets.symmetric(horizontal: 12, vertical: 8),
decoration: BoxDecoration(
color: Colors.blue.withOpacity(0.1),
borderRadius: BorderRadius.circular(12),
border: Border.all(color: Colors.blue.withOpacity(0.3)),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.photo, size: 16, color: Colors.blue),
SizedBox(width: 6),
Text(
image['name']!,
style: TextStyle(fontSize: 12, color: Colors.blue),
),
SizedBox(width: 4),
GestureDetector(
onTap: () {
// 删除图片
},
child: Icon(
Icons.close,
size: 14,
color: Colors.blue,
),
),
],
),
);
}).toList(),
),
SizedBox(height: 12),
],
);
}
return FormBuilder(
key: widget.formKey,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [buildTitle(), SizedBox(height: 20), buildForm()],
children: [
// 文本输入区域
Expanded(
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
buildContentField(),
SizedBox(height: 4),
buildSelectedTags(),
buildImagePreview(),
],
),
),
),
// 底部功能按钮行
buildBottomButton(),
],
),
);
}