fix(flutter): 剧场搜索框改为浅灰胶囊

This commit is contained in:
Zhou Weidong committed 2026-10-20 14:58:18 +08:00
1 parent 63ace3b574
commit eccd3c6dc1
2 files changed
+61 -47

No files matched your search

@@ -5,11 +5,14 @@ import 'package:flutter/material.dart';
import '../../../core/theme/app_colors.dart';
import '../../../l10n/app_localizations.dart';
const double _searchHeight = 40;
const double _searchRadius = 20;
const double _searchHeight = 44;
const double _searchRadius = 22;
const double _searchPadding = 14;
const double _iconSize = 18;
const double _iconGap = 8;
const Duration _focusTransition = Duration(milliseconds: 160);
/// 剧场顶部整行搜索框:白底细边,聚焦时主题色描边与更深的阴影。
/// 剧场顶部整行搜索框:浅灰胶囊,聚焦时变白并显示主题色描边。
class DiscoverSearchField extends StatefulWidget {
const DiscoverSearchField({
super.key,
@@ -69,57 +72,62 @@ class _DiscoverSearchFieldState extends State<DiscoverSearchField> {
duration: _focusTransition,
curve: Curves.easeOut,
height: _searchHeight,
padding: const EdgeInsets.symmetric(horizontal: _searchPadding),
decoration: BoxDecoration(
color: AppColors.card,
color: _focused ? AppColors.card : AppColors.commentInput,
borderRadius: BorderRadius.circular(_searchRadius),
border: Border.all(
color: _focused ? AppColors.blue : AppColors.border,
color: _focused ? AppColors.blue : Colors.transparent,
),
boxShadow: [
BoxShadow(
color: _focused
? AppColors.blue.withValues(alpha: 0.18)
: Colors.black.withValues(alpha: 0.04),
blurRadius: _focused ? 10 : 4,
offset: const Offset(0, 2),
),
],
),
child: TextField(
key: const Key('discover-search'),
controller: widget.controller,
focusNode: widget.focusNode,
onChanged: widget.onChanged,
onTapOutside: (_) => widget.focusNode.unfocus(),
textInputAction: TextInputAction.search,
style: const TextStyle(color: AppColors.onSurface, fontSize: 14),
decoration: InputDecoration(
isDense: true,
filled: false,
hintText: AppLocalizations.of(context)!.searchDiscover,
hintStyle: const TextStyle(color: AppColors.subtle, fontSize: 13.5),
prefixIcon: const Icon(
child: Row(
children: [
const Icon(
Icons.search_rounded,
color: AppColors.subtle,
size: 17,
size: _iconSize,
),
suffixIcon: widget.loading
? const SizedBox.square(
dimension: 18,
child: Center(
child: CircularProgressIndicator(strokeWidth: 2),
),
)
: null,
suffixIconConstraints: const BoxConstraints(
minWidth: 0,
minHeight: 0,
const SizedBox(width: _iconGap),
Expanded(
child: TextField(
key: const Key('discover-search'),
controller: widget.controller,
focusNode: widget.focusNode,
onChanged: widget.onChanged,
onTapOutside: (_) => widget.focusNode.unfocus(),
textInputAction: TextInputAction.search,
textAlignVertical: TextAlignVertical.center,
style: const TextStyle(
color: AppColors.onSurface,
fontSize: 14,
),
decoration: InputDecoration(
isDense: true,
hintText: AppLocalizations.of(context)!.searchDiscover,
hintStyle: const TextStyle(
color: AppColors.subtle,
fontSize: 14,
),
border: InputBorder.none,
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
contentPadding: EdgeInsets.zero,
suffixIcon: widget.loading
? const SizedBox.square(
dimension: 18,
child: Center(
child: CircularProgressIndicator(strokeWidth: 2),
),
)
: null,
suffixIconConstraints: const BoxConstraints(
minWidth: 0,
minHeight: 0,
),
),
),
),
contentPadding: const EdgeInsets.symmetric(horizontal: 12),
border: InputBorder.none,
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
),
],
),
),
);
+8 -2
View File
@@ -182,12 +182,18 @@ void main() {
.decoration!
as BoxDecoration;
expect(shell().borderRadius, BorderRadius.circular(20));
expect((shell().border! as Border).top.color, AppColors.border);
expect(shell().borderRadius, BorderRadius.circular(22));
expect(shell().color, AppColors.commentInput);
expect((shell().border! as Border).top.color, Colors.transparent);
expect(
tester.getSize(find.byKey(const Key('discover-search-shell'))).height,
44,
);
await tester.tap(find.byKey(const Key('discover-search')));
await tester.pump(const Duration(milliseconds: 200));
expect(shell().color, AppColors.card);
expect((shell().border! as Border).top.color, AppColors.blue);
});