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

feat:更新闪灵UI模块

Browse Source
This commit is contained in:
Cxx0822
2025-11-10 13:35:31 +08:00
parent e84be63d9f
commit d25d347bcd
4 changed files with 214 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
lib/main.dart
View File

@@ -34,7 +34,7 @@ void main() async{
// todosBox.clear(); // todosBox.clear();
final flispBox = await Hive.openBox<Flisp>('flisps'); final flispBox = await Hive.openBox<Flisp>('flisps');
flispBox.clear(); // flispBox.clear();
// notifyService.cancelAllNotifications(); // notifyService.cancelAllNotifications();

2
lib/widgets/common.dart
View File

@@ -20,7 +20,7 @@ Container buildBody({Widget? child}) {
Container buildCard({Widget? child}) { Container buildCard({Widget? child}) {
return Container( return Container(
decoration: buildBoxDecoration(), decoration: buildBoxDecoration(),
padding: EdgeInsets.all(10), padding: EdgeInsets.all(16),
child: child, child: child,
); );
} }

348
lib/widgets/flisp_form.dart
View File

@@ -1,5 +1,6 @@
import 'package:flisp_app/models/flisp.dart'; import 'package:flisp_app/models/flisp.dart';
import 'package:flisp_app/provider/flisp_provider.dart'; import 'package:flisp_app/provider/flisp_provider.dart';
import 'package:flisp_app/widgets/flisp_widget.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart'; import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:provider/provider.dart'; import 'package:provider/provider.dart';
@@ -23,17 +24,33 @@ class FlispForm extends StatefulWidget {
} }
class _FlispFormState extends State<FlispForm> { class _FlispFormState extends State<FlispForm> {
bool _showTagOptions = false;
@override @override
void initState() { void initState() {
super.initState(); super.initState();
} }
void _toggleTagOptions() {
setState(() {
_showTagOptions = !_showTagOptions;
});
}
void _selectTag(FlispTag tag) {
final provider = Provider.of<FlispProvider>(context, listen: false);
setState(() {
provider.formItem.tag = tag;
_showTagOptions = false;
});
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final int maxContentCount = 100; final int maxContentCount = 100;
final provider = Provider.of<FlispProvider>(context); final provider = Provider.of<FlispProvider>(context);
FormBuilderTextField buildContentField() { Widget buildContentField() {
return FormBuilderTextField( return FormBuilderTextField(
name: 'content', name: 'content',
initialValue: provider.formItem.content, initialValue: provider.formItem.content,
@@ -78,23 +95,129 @@ class _FlispFormState extends State<FlispForm> {
); );
} }
// 图标按钮组件 Widget buildFormBody() {
Widget buildIconButton({ return Expanded(
required IconData icon, child: SingleChildScrollView(
required Color color, child: Column(
required VoidCallback onTap, crossAxisAlignment: CrossAxisAlignment.start,
}) { children: [
return GestureDetector( buildContentField(),
onTap: onTap, SizedBox(height: 8),
child: Container( buildFlispTag(provider.formItem),
width: 32, SizedBox(height: 12),
height: 32, ],
decoration: BoxDecoration( ),
color: color.withAlpha(50), ),
borderRadius: BorderRadius.circular(8), );
border: Border.all(color: color.withAlpha(80), width: 1), }
Widget buildSelectImageButton() {
return GestureDetector(
onTap: () {},
child: Container(
width: 36,
height: 36,
decoration: BoxDecoration(
color: Colors.blue.withAlpha(50),
borderRadius: BorderRadius.circular(8),
border: Border.all(color: Colors.blue.withAlpha(80), width: 1),
),
child: Icon(
Icons.photo_library_rounded,
size: 20,
color: Colors.blue,
),
),
);
}
Widget buildSelectTagButton() {
return GestureDetector(
onTap: _toggleTagOptions,
child: Container(
width: 36,
height: 36,
decoration: BoxDecoration(
color: Colors.orange.withAlpha(50),
borderRadius: BorderRadius.circular(8),
border: Border.all(color: Colors.orange.withAlpha(80), width: 1),
),
child: Icon(
Icons.local_offer_rounded,
size: 20,
color: Colors.orange,
),
),
);
}
Widget buildConfirmButton() {
return Container(
width: 48,
height: 48,
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
borderRadius: BorderRadius.circular(24),
),
child: IconButton(
icon: Icon(Icons.arrow_forward_rounded, size: 24),
color: Colors.white,
onPressed: () => widget.onOk(),
),
);
}
Widget buildShowTagOptions() {
// 计算弹窗位置（基于标签按钮位置）
return Positioned(
bottom: 50, // 调整垂直位置
left: 60, // 调整水平位置
child: Container(
width: 90,
padding: EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8),
boxShadow: [
BoxShadow(
color: Colors.black26,
blurRadius: 8,
offset: Offset(0, 2),
),
],
),
child: Column(
mainAxisSize: MainAxisSize.min,
children:
FlispTag.values.map((tag) {
return GestureDetector(
onTap: () => _selectTag(tag),
child: Container(
width: double.infinity,
padding: EdgeInsets.symmetric(vertical: 8, horizontal: 8),
child: Row(
children: [
Container(
width: 20,
height: 20,
decoration: BoxDecoration(
color: tag.color,
shape: BoxShape.circle,
),
child: Icon(
tag.icon,
size: 12,
color: Colors.white,
),
),
SizedBox(width: 8),
Text(tag.label, style: TextStyle(fontSize: 12)),
],
),
),
);
}).toList(),
), ),
child: Icon(icon, size: 18, color: color),
), ),
); );
} }
@@ -105,182 +228,45 @@ class _FlispFormState extends State<FlispForm> {
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
// 功能图标区域
Row( Row(
children: [ children: [
// 上传图片按钮 buildSelectImageButton(),
buildIconButton(
icon: Icons.photo_library_rounded,
color: Colors.blue,
onTap: () {
// 上传图片功能
},
),
SizedBox(width: 12), SizedBox(width: 12),
buildSelectTagButton(),
// 选择标签按钮
buildIconButton(
icon: Icons.local_offer_rounded,
color: Colors.orange,
onTap: () {
// 选择标签功能
},
),
], ],
), ),
buildConfirmButton(),
// 确认按钮（箭头形状）
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(),
),
),
], ],
), ),
); );
} }
// 选择的标签显示 // 整体使用Stack布局分离事件层级
Widget buildSelectedTags() { return Stack(
// 模拟选择的标签 children: [
final selectedTags = ['旅行', '美食']; // 外层点击区域（用于关闭弹窗）
GestureDetector(
onTap: () {
if (_showTagOptions) {
setState(() => _showTagOptions = false);
}
},
// 弹窗显示时才拦截事件，隐藏时不影响其他点击
behavior:
_showTagOptions
? HitTestBehavior.opaque
: HitTestBehavior.translucent,
),
if (selectedTags.isEmpty) return SizedBox(); // 主表单内容
FormBuilder(
key: widget.formKey,
child: Column(children: [buildFormBody(), buildBottomButton()]),
),
return Column( // 标签弹窗（放在最上层，确保事件优先响应）
crossAxisAlignment: CrossAxisAlignment.start, if (_showTagOptions) buildShowTagOptions(),
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),
],
);
}
// 图片预览
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(
children: [
// 文本输入区域
Expanded(
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
buildContentField(),
SizedBox(height: 4),
buildSelectedTags(),
buildImagePreview(),
],
),
),
),
// 底部功能按钮行
buildBottomButton(),
],
),
); );
} }
} }

72
lib/widgets/flisp_widget.dart
View File

@@ -49,11 +49,7 @@ Widget _buildFlispContent(Flisp flisp) {
return RichText( return RichText(
text: TextSpan( text: TextSpan(
text: flisp.content, text: flisp.content,
style: const TextStyle( style: const TextStyle(color: Colors.black87, fontSize: 16),
color: Colors.black87,
fontWeight: FontWeight.bold,
fontSize: 18,
),
), ),
); );
} }
@@ -136,28 +132,50 @@ Widget _buildFlispVideo(Flisp flisp) {
); );
} }
Widget _buildFlispTag(Flisp flisp) { Widget buildFlispTag(Flisp flisp) {
return Row( return Container(
children: [ padding: EdgeInsets.symmetric(horizontal: 12, vertical: 6),
// 只有一个标签，直接显示 decoration: BoxDecoration(
Container( color: flisp.tag.color.withAlpha(30),
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2), borderRadius: BorderRadius.circular(8),
decoration: BoxDecoration( border: Border.all(color: flisp.tag.color.withAlpha(60)),
color: Colors.orange, ),
borderRadius: BorderRadius.circular(12), child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 14,
height: 14,
decoration: BoxDecoration(
color: flisp.tag.color,
shape: BoxShape.circle,
),
child: Icon(flisp.tag.icon, size: 8, color: Colors.white),
), ),
child: Text( SizedBox(width: 6),
Text(
flisp.tag.label, flisp.tag.label,
style: const TextStyle(fontSize: 12, color: Colors.white), style: TextStyle(
fontSize: 12,
color: flisp.tag.color,
fontWeight: FontWeight.w500,
),
), ),
), ],
const Spacer(), ),
// 时间在后 );
Text( }
DateFormat('yyyy-MM-dd HH:mm').format(flisp.createTime),
style: TextStyle(fontSize: 12, color: Colors.grey[500]), Widget buildFlispTime(Flisp flisp) {
), return Text(
], DateFormat('yyyy-MM-dd HH:mm:ss').format(flisp.createTime),
style: TextStyle(fontSize: 12, color: Colors.grey),
);
}
Widget _buildFlispSuffix(Flisp flisp) {
return Row(
children: [buildFlispTag(flisp), const Spacer(), buildFlispTime(flisp)],
); );
} }
@@ -180,7 +198,7 @@ Widget _buildFlispItem({
const SizedBox(height: 4), const SizedBox(height: 4),
if (hasVideo) _buildFlispVideo(flisp), if (hasVideo) _buildFlispVideo(flisp),
const SizedBox(height: 4), const SizedBox(height: 4),
_buildFlispTag(flisp), _buildFlispSuffix(flisp),
], ],
), ),
), ),
@@ -193,9 +211,9 @@ Widget buildEmptyState() {
child: Column( child: Column(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
Icon(Icons.checklist, size: 80, color: Colors.orange.shade600), Icon(Icons.flash_on, size: 80, color: Colors.orange.shade600),
Text( Text(
'📝 还没有闪灵\n点击➕号添加第一个任务吧～', '📝 还没有闪灵\n点击➕号添加第一个灵感吧～',
textAlign: TextAlign.center, textAlign: TextAlign.center,
style: TextStyle(color: Colors.orange.shade600), style: TextStyle(color: Colors.orange.shade600),
), ),