马良AI写作初始化仓库
This commit is contained in:
邓滨杰
265
AINoval/lib/widgets/common/search_action_bar.dart
Normal file
265
AINoval/lib/widgets/common/search_action_bar.dart
Normal file
@@ -0,0 +1,265 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:ainoval/utils/web_theme.dart';
|
||||
|
||||
/// 搜索和操作栏公共组件
|
||||
class SearchActionBar extends StatefulWidget {
|
||||
final TextEditingController searchController;
|
||||
final String searchHint;
|
||||
final VoidCallback? onFilterPressed;
|
||||
final VoidCallback? onNewPressed;
|
||||
final VoidCallback? onSettingsPressed;
|
||||
final String newButtonText;
|
||||
final Function(String)? onSearchChanged;
|
||||
final bool showFilterButton;
|
||||
final bool showNewButton;
|
||||
final bool showSettingsButton;
|
||||
|
||||
const SearchActionBar({
|
||||
super.key,
|
||||
required this.searchController,
|
||||
this.searchHint = '搜索...',
|
||||
this.onFilterPressed,
|
||||
this.onNewPressed,
|
||||
this.onSettingsPressed,
|
||||
this.newButtonText = '新建',
|
||||
this.onSearchChanged,
|
||||
this.showFilterButton = true,
|
||||
this.showNewButton = true,
|
||||
this.showSettingsButton = true,
|
||||
});
|
||||
|
||||
@override
|
||||
State<SearchActionBar> createState() => _SearchActionBarState();
|
||||
}
|
||||
|
||||
class _SearchActionBarState extends State<SearchActionBar> {
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
widget.searchController.addListener(_onSearchChanged);
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
widget.searchController.removeListener(_onSearchChanged);
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
void _onSearchChanged() {
|
||||
setState(() {}); // 触发重建以更新清除按钮显示状态
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final isDark = WebTheme.isDarkMode(context);
|
||||
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
||||
decoration: BoxDecoration(
|
||||
color: WebTheme.getBackgroundColor(context), // 🚀 修复：使用背景色而不是表面色
|
||||
border: Border(
|
||||
bottom: BorderSide(
|
||||
color: isDark ? WebTheme.darkGrey200 : WebTheme.grey200,
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.center, // 确保所有元素垂直居中
|
||||
children: [
|
||||
// 搜索框 - 占用大部分空间
|
||||
Expanded(
|
||||
child: Container(
|
||||
height: 36,
|
||||
decoration: BoxDecoration(
|
||||
// 根据主题模式设置背景，使用背景色而不是灰色
|
||||
color: WebTheme.getBackgroundColor(context), // 🚀 修复：使用背景色而不是灰色
|
||||
borderRadius: BorderRadius.circular(6),
|
||||
border: Border.all(
|
||||
color: isDark ? WebTheme.darkGrey300 : WebTheme.grey200,
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
// 搜索图标
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(left: 12, right: 8),
|
||||
child: Icon(
|
||||
Icons.search,
|
||||
size: 18,
|
||||
color: isDark ? WebTheme.darkGrey400 : WebTheme.grey500,
|
||||
),
|
||||
),
|
||||
// 搜索输入框
|
||||
Expanded(
|
||||
child: TextField(
|
||||
controller: widget.searchController,
|
||||
onChanged: widget.onSearchChanged,
|
||||
style: TextStyle(
|
||||
fontSize: 14,
|
||||
color: isDark ? WebTheme.darkGrey100 : WebTheme.grey900,
|
||||
height: 1.0, // 确保文字垂直居中
|
||||
),
|
||||
decoration: InputDecoration(
|
||||
hintText: widget.searchHint,
|
||||
hintStyle: TextStyle(
|
||||
fontSize: 14,
|
||||
color: isDark ? WebTheme.darkGrey400 : WebTheme.grey500,
|
||||
height: 1.0, // 确保提示文字垂直居中
|
||||
),
|
||||
border: InputBorder.none,
|
||||
contentPadding: const EdgeInsets.symmetric(
|
||||
horizontal: 0,
|
||||
vertical: 10, // 调整垂直内边距确保居中
|
||||
),
|
||||
isDense: true, // 减少默认内边距
|
||||
),
|
||||
),
|
||||
),
|
||||
// 清除按钮
|
||||
if (widget.searchController.text.isNotEmpty)
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(right: 8),
|
||||
child: InkWell(
|
||||
onTap: () {
|
||||
widget.searchController.clear();
|
||||
widget.onSearchChanged?.call('');
|
||||
},
|
||||
child: Icon(
|
||||
Icons.clear,
|
||||
size: 18,
|
||||
color: isDark ? WebTheme.darkGrey400 : WebTheme.grey500,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
const SizedBox(width: 12),
|
||||
|
||||
// 操作按钮区域
|
||||
Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.center, // 确保按钮垂直居中
|
||||
children: [
|
||||
// 过滤器按钮
|
||||
if (widget.showFilterButton) ...[
|
||||
_buildIconButton(
|
||||
icon: Icons.filter_list,
|
||||
onPressed: widget.onFilterPressed,
|
||||
tooltip: '过滤器',
|
||||
isDark: isDark,
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
],
|
||||
|
||||
// 新建按钮
|
||||
if (widget.showNewButton) ...[
|
||||
_buildNewButton(
|
||||
text: widget.newButtonText,
|
||||
onPressed: widget.onNewPressed,
|
||||
isDark: isDark,
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
],
|
||||
|
||||
// 设置按钮
|
||||
if (widget.showSettingsButton)
|
||||
_buildIconButton(
|
||||
icon: Icons.settings,
|
||||
onPressed: widget.onSettingsPressed,
|
||||
tooltip: '设置',
|
||||
isDark: isDark,
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildIconButton({
|
||||
required IconData icon,
|
||||
required VoidCallback? onPressed,
|
||||
required String tooltip,
|
||||
required bool isDark,
|
||||
}) {
|
||||
return Container(
|
||||
width: 36,
|
||||
height: 36,
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.transparent,
|
||||
borderRadius: BorderRadius.circular(6),
|
||||
border: Border.all(
|
||||
color: isDark ? WebTheme.darkGrey300 : WebTheme.grey300,
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
child: Material(
|
||||
color: Colors.transparent,
|
||||
child: InkWell(
|
||||
onTap: onPressed,
|
||||
borderRadius: BorderRadius.circular(6),
|
||||
child: Tooltip(
|
||||
message: tooltip,
|
||||
child: Center( // 确保图标居中
|
||||
child: Icon(
|
||||
icon,
|
||||
size: 18,
|
||||
color: isDark ? WebTheme.darkGrey300 : WebTheme.grey700,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildNewButton({
|
||||
required String text,
|
||||
required VoidCallback? onPressed,
|
||||
required bool isDark,
|
||||
}) {
|
||||
return Container(
|
||||
height: 36,
|
||||
decoration: BoxDecoration(
|
||||
color: isDark ? WebTheme.darkGrey100 : WebTheme.grey900,
|
||||
borderRadius: BorderRadius.circular(6),
|
||||
),
|
||||
child: Material(
|
||||
color: Colors.transparent,
|
||||
child: InkWell(
|
||||
onTap: onPressed,
|
||||
borderRadius: BorderRadius.circular(6),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
mainAxisAlignment: MainAxisAlignment.center, // 确保内容居中
|
||||
children: [
|
||||
Icon(
|
||||
Icons.add,
|
||||
size: 16,
|
||||
color: isDark ? WebTheme.darkGrey900 : WebTheme.white,
|
||||
),
|
||||
const SizedBox(width: 6),
|
||||
Text(
|
||||
text,
|
||||
style: TextStyle(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: isDark ? WebTheme.darkGrey900 : WebTheme.white,
|
||||
height: 1.0, // 确保文字垂直居中
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user