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-20 23:40:06 +08:00
parent 6ed9efe06d
commit 3ea162f33e
9 changed files with 798 additions and 785 deletions
Download Patch File Download Diff File Expand all files Collapse all files

405
lib/widgets/flisp_form.dart
View File

@@ -27,6 +27,7 @@ class FlispForm extends StatefulWidget {
class _FlispFormState extends State<FlispForm> {
bool _showTagOptions = false;
final int maxContentCount = 100;
@override
void initState() {
@@ -62,223 +63,211 @@ class _FlispFormState extends State<FlispForm> {
});
}
@override
Widget build(BuildContext context) {
final int maxContentCount = 100;
final provider = Provider.of<FlispProvider>(context);
Widget buildContentField(FlispProvider provider) {
final colors = Theme.of(context).colorScheme;
Widget buildContentField() {
return FormBuilderTextField(
name: 'content',
initialValue: provider.formItem.content,
onChanged: (value) {
setState(() {
provider.formItem.content = value ?? '';
});
},
decoration: InputDecoration(
hintText: '记录你的灵感瞬间...',
hintStyle: TextStyle(color: Colors.grey),
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.primary),
),
filled: true,
fillColor: colors.surface,
contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 14),
return FormBuilderTextField(
name: 'content',
initialValue: provider.formItem.content,
onChanged: (value) {
setState(() {
provider.formItem.content = value ?? '';
});
},
decoration: InputDecoration(
hintText: '记录你的灵感瞬间...',
hintStyle: TextStyle(color: Colors.grey),
counterText: '',
suffixText: '${provider.formItem.content.length}/$maxContentCount',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(color: Colors.grey.shade200),
),
minLines: 4,
maxLines: 8,
maxLength: maxContentCount,
validator: (value) {
if (value != null && value.isEmpty) {
return '请输入内容';
}
if (value != null && value.length > maxContentCount) {
return '内容不能超过$maxContentCount个字符';
}
return null;
},
);
}
Widget buildFormBody() {
return Expanded(
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
buildContentField(),
SizedBox(height: 8),
buildFlispTag(provider.formItem),
SizedBox(height: 12),
if (provider.formItem.imageUrl.isNotEmpty)
buildFlispImage(
flisp: provider.formItem,
showDelete: true,
onDelete: _deleteImage,
),
],
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(color: Colors.grey.shade200),
),
);
}
void selectImage() async {
FilePickerResult? result = await FilePicker.platform.pickFiles(
type: FileType.custom,
allowedExtensions: ['jpg', 'jpeg', 'png'],
allowMultiple: false,
);
if (result != null) {
PlatformFile file = result.files.first;
final fileName = await MinIOHelper().uploadFile(file: file);
_selectImage(fileName);
}
}
Widget buildSelectImageButton() {
return GestureDetector(
onTap: () => selectImage(),
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,
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(color: colors.primary),
),
);
}
filled: true,
fillColor: colors.surface,
contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 14),
),
minLines: 4,
maxLines: 8,
maxLength: maxContentCount,
validator: (value) {
if (value != null && value.isEmpty) {
return '请输入内容';
}
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,
),
),
);
}
if (value != null && value.length > maxContentCount) {
return '内容不能超过$maxContentCount个字符';
}
return null;
},
);
}
Widget buildConfirmButton() {
return Container(
width: 48,
height: 48,
decoration: BoxDecoration(
color: colors.primary,
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(),
),
),
);
}
Widget buildBottomButton() {
return Container(
padding: EdgeInsets.only(top: 16),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
Widget buildFormBody(FlispProvider provider) {
return Expanded(
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
buildSelectImageButton(),
SizedBox(width: 12),
buildSelectTagButton(),
],
),
buildConfirmButton(),
buildContentField(provider),
SizedBox(height: 8),
buildFlispTag(context, provider.formItem),
SizedBox(height: 12),
if (provider.formItem.imageUrl.isNotEmpty)
buildFlispImage(
flisp: provider.formItem,
showDelete: true,
onDelete: _deleteImage,
),
],
),
);
),
);
}
void selectImage() async {
FilePickerResult? result = await FilePicker.platform.pickFiles(
type: FileType.custom,
allowedExtensions: ['jpg', 'jpeg', 'png'],
allowMultiple: false,
);
if (result != null) {
PlatformFile file = result.files.first;
final fileName = await MinIOHelper().uploadFile(file: file);
_selectImage(fileName);
}
}
Widget buildSelectImageButton() {
return GestureDetector(
onTap: () => selectImage(),
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).colorScheme.primary,
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(),
),
),
);
}
Widget buildBottomButton() {
return Container(
padding: EdgeInsets.only(top: 16),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
buildSelectImageButton(),
SizedBox(width: 12),
buildSelectTagButton(),
],
),
buildConfirmButton(),
],
),
);
}
@override
Widget build(BuildContext context) {
final provider = Provider.of<FlispProvider>(context);
// 整体使用Stack布局分离事件层级
return Stack(
@@ -300,7 +289,9 @@ class _FlispFormState extends State<FlispForm> {
// 主表单内容
FormBuilder(
key: widget.formKey,
child: Column(children: [buildFormBody(), buildBottomButton()]),
child: Column(
children: [buildFormBody(provider), buildBottomButton()],
),
),
// 标签弹窗（放在最上层，确保事件优先响应）