feat:增加闪灵功能
This commit is contained in:
173
lib/widgets/flisp_form.dart
Normal file
173
lib/widgets/flisp_form.dart
Normal file
@@ -0,0 +1,173 @@
|
||||
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()],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
205
lib/widgets/flisp_widget.dart
Normal file
205
lib/widgets/flisp_widget.dart
Normal file
@@ -0,0 +1,205 @@
|
||||
import 'package:flisp_app/models/flisp.dart';
|
||||
import 'package:flisp_app/widgets/common.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:intl/intl.dart';
|
||||
import 'package:toggle_switch/toggle_switch.dart';
|
||||
|
||||
Widget buildTabs({
|
||||
required FlispTab currentTab,
|
||||
required ValueChanged<FlispTab> onTabChanged,
|
||||
}) {
|
||||
return Container(
|
||||
padding: EdgeInsets.all(8),
|
||||
child: ToggleSwitch(
|
||||
minWidth: 90.0,
|
||||
minHeight: 40.0,
|
||||
initialLabelIndex: FlispTab.values.indexOf(currentTab),
|
||||
totalSwitches: FlispTab.values.length,
|
||||
labels: FlispTab.values.map((e) => e.label).toList(),
|
||||
activeBgColor: [Colors.orange.shade600],
|
||||
activeFgColor: Colors.white,
|
||||
inactiveBgColor: Colors.grey.shade200,
|
||||
inactiveFgColor: Colors.grey.shade700,
|
||||
cornerRadius: 12.0,
|
||||
customTextStyles: [TextStyle(fontSize: 12, fontWeight: FontWeight.w500)],
|
||||
onToggle: (index) {
|
||||
if (index != null) {
|
||||
onTabChanged(FlispTab.values[index]);
|
||||
}
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget buildFlispList({
|
||||
required List<Flisp> flisps,
|
||||
required ValueChanged<Flisp> onEdit,
|
||||
}) {
|
||||
return ListView.separated(
|
||||
itemCount: flisps.length,
|
||||
separatorBuilder: (context, index) => SizedBox(height: 8),
|
||||
itemBuilder: (context, index) {
|
||||
final flisp = flisps[index];
|
||||
return _buildFlispItem(flisp: flisp, onEdit: onEdit);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildFlispContent(Flisp flisp) {
|
||||
return RichText(
|
||||
text: TextSpan(
|
||||
text: flisp.content,
|
||||
style: const TextStyle(
|
||||
color: Colors.black87,
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 18,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildFlispImage(Flisp flisp) {
|
||||
return Container(
|
||||
height: 150,
|
||||
margin: const EdgeInsets.only(bottom: 8),
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
image: DecorationImage(
|
||||
image: NetworkImage(flisp.imageUrl),
|
||||
fit: BoxFit.cover,
|
||||
),
|
||||
),
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
color: Colors.black.withOpacity(0.3),
|
||||
),
|
||||
alignment: Alignment.topRight,
|
||||
child: const Padding(
|
||||
padding: EdgeInsets.all(6.0),
|
||||
child: Icon(Icons.image, color: Colors.white, size: 20),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildFlispVideo(Flisp flisp) {
|
||||
return Container(
|
||||
height: 120,
|
||||
margin: const EdgeInsets.only(bottom: 8),
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
color: Colors.grey[300],
|
||||
),
|
||||
child: Stack(
|
||||
alignment: Alignment.center,
|
||||
children: [
|
||||
// 视频缩略图背景
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
color: Colors.blue[100],
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
colors: [Colors.blue[200]!, Colors.blue[400]!],
|
||||
),
|
||||
),
|
||||
),
|
||||
// 播放按钮
|
||||
const CircleAvatar(
|
||||
backgroundColor: Colors.white,
|
||||
radius: 24,
|
||||
child: Icon(Icons.play_arrow, color: Colors.red, size: 36),
|
||||
),
|
||||
// 视频标识
|
||||
const Positioned(
|
||||
top: 8,
|
||||
right: 8,
|
||||
child: Icon(Icons.videocam, color: Colors.red, size: 20),
|
||||
),
|
||||
// 视频时长
|
||||
const Positioned(
|
||||
bottom: 8,
|
||||
right: 8,
|
||||
child: Text(
|
||||
'02:30',
|
||||
style: TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildFlispTag(Flisp flisp) {
|
||||
return Row(
|
||||
children: [
|
||||
// 只有一个标签，直接显示
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.orange,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: Text(
|
||||
flisp.tag.label,
|
||||
style: const TextStyle(fontSize: 12, color: Colors.white),
|
||||
),
|
||||
),
|
||||
const Spacer(),
|
||||
// 时间在后
|
||||
Text(
|
||||
DateFormat('yyyy-MM-dd HH:mm').format(flisp.createTime),
|
||||
style: TextStyle(fontSize: 12, color: Colors.grey[500]),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildFlispItem({
|
||||
required Flisp flisp,
|
||||
required ValueChanged<Flisp> onEdit,
|
||||
}) {
|
||||
final hasImage = flisp.imageUrl.isNotEmpty;
|
||||
final hasVideo = flisp.videoUrl.isNotEmpty;
|
||||
|
||||
return buildCard(
|
||||
child: InkWell(
|
||||
onTap: () => onEdit(flisp),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
_buildFlispContent(flisp),
|
||||
const SizedBox(height: 8),
|
||||
if (hasImage) _buildFlispImage(flisp),
|
||||
const SizedBox(height: 4),
|
||||
if (hasVideo) _buildFlispVideo(flisp),
|
||||
const SizedBox(height: 4),
|
||||
_buildFlispTag(flisp),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// 空状态
|
||||
Widget buildEmptyState() {
|
||||
return Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(Icons.checklist, size: 80, color: Colors.orange.shade600),
|
||||
Text(
|
||||
'📝 还没有闪灵\n点击➕号添加第一个任务吧～',
|
||||
textAlign: TextAlign.center,
|
||||
style: TextStyle(color: Colors.orange.shade600),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
@@ -64,7 +64,25 @@ class _TodoFormState extends State<TodoForm> {
|
||||
});
|
||||
},
|
||||
decoration: InputDecoration(
|
||||
labelText: '标题',
|
||||
label: RichText(
|
||||
text: TextSpan(
|
||||
text: '标题',
|
||||
style: TextStyle(
|
||||
color: Colors.grey.shade700,
|
||||
fontSize: 16,
|
||||
),
|
||||
children: const [
|
||||
TextSpan(
|
||||
text: '*',
|
||||
style: TextStyle(
|
||||
color: Colors.red,
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
hintText: '请输入待办事项标题...',
|
||||
counterText: '',
|
||||
suffixText: '${provider.formItem.title.length}/$maxTitleCount',
|
||||
@@ -174,7 +192,7 @@ class _TodoFormState extends State<TodoForm> {
|
||||
? Colors.grey
|
||||
: Colors.black87,
|
||||
),
|
||||
prefixIcon: Icon(Icons.calendar_today, color: Colors.purple),
|
||||
prefixIcon: Icon(Icons.calendar_month, color: Colors.purple),
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
borderSide: BorderSide(color: Colors.grey.shade200),
|
||||
@@ -239,7 +257,7 @@ class _TodoFormState extends State<TodoForm> {
|
||||
? Colors.grey
|
||||
: Colors.black87,
|
||||
),
|
||||
prefixIcon: Icon(Icons.calendar_today, color: Colors.purple),
|
||||
prefixIcon: Icon(Icons.calendar_month, color: Colors.purple),
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
borderSide: BorderSide(color: Colors.grey.shade200),
|
||||
|
||||
Reference in New Issue
Block a user