feat: 首页UI，搜索，我的UI
This commit is contained in:
chengsiwen committed
1 parent
7f329aef44
commit
a2b38fa1e8
22 files changed
+1382
-22
No files matched your search
@@ -0,0 +1,735 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:novyronst/common/const/const_color.dart';
|
||||
import 'package:novyronst/common/const/const_string.dart';
|
||||
import 'package:novyronst/pages/widgets/cut_corner_clipper.dart';
|
||||
import 'package:novyronst/pages/widgets/ny_tag_widget.dart';
|
||||
import 'package:novyronst/tools/widgets/novy_com_widget.dart';
|
||||
|
||||
class HomeRemainingSections extends StatelessWidget {
|
||||
const HomeRemainingSections({super.key});
|
||||
|
||||
static const List<_DramaItem> _rankingItems = [
|
||||
_DramaItem(
|
||||
title: 'Star Of The Ocean',
|
||||
category: 'Period Drama',
|
||||
palette: [Color(0xFF6E4968), Color(0xFFE5A3B8)],
|
||||
),
|
||||
_DramaItem(
|
||||
title: 'Not Your Bride',
|
||||
category: 'Period Drama',
|
||||
palette: [Color(0xFF262431), Color(0xFFE0A15F)],
|
||||
),
|
||||
_DramaItem(
|
||||
title: 'Not Your Bride',
|
||||
category: 'Period Drama',
|
||||
palette: [Color(0xFF261B16), Color(0xFFD9C2A2)],
|
||||
),
|
||||
_DramaItem(
|
||||
title: 'Not Your Bride',
|
||||
category: 'Period Drama',
|
||||
palette: [Color(0xFF223E36), Color(0xFFFFC568)],
|
||||
),
|
||||
];
|
||||
|
||||
static const _ActorInfo _actor = _ActorInfo(
|
||||
name: 'Cheng Zi',
|
||||
tags: 'Romantic Lead | Revenge Drama | Lead Actor',
|
||||
bornYear: '2002',
|
||||
height: '168cm',
|
||||
nationality: 'China',
|
||||
);
|
||||
|
||||
static const List<_DramaItem> _seriesItems = [
|
||||
_DramaItem(
|
||||
title: 'Cities Of Smoke Starlight',
|
||||
category: 'Satisfying',
|
||||
palette: [Color(0xFF33241D), Color(0xFFD8A65B)],
|
||||
),
|
||||
_DramaItem(
|
||||
title: 'Cities Of Smoke Starlight',
|
||||
category: 'Satisfying',
|
||||
palette: [Color(0xFF25354C), Color(0xFFC88B57)],
|
||||
),
|
||||
_DramaItem(
|
||||
title: 'Cities Of Smoke Starlight',
|
||||
category: 'Satisfying',
|
||||
palette: [Color(0xFF3E2B2C), Color(0xFFE2B36B)],
|
||||
),
|
||||
_DramaItem(
|
||||
title: 'Cities Of Smoke Starlight',
|
||||
category: 'Satisfying',
|
||||
palette: [Color(0xFF443A2C), Color(0xFFC48645)],
|
||||
),
|
||||
_DramaItem(
|
||||
title: 'Cities Of Smoke Starlight',
|
||||
category: 'Satisfying',
|
||||
palette: [Color(0xFF314559), Color(0xFFE5AA65)],
|
||||
),
|
||||
_DramaItem(
|
||||
title: 'Cities Of Smoke Starlight',
|
||||
category: 'Satisfying',
|
||||
palette: [Color(0xFF2C2637), Color(0xFFD39458)],
|
||||
),
|
||||
];
|
||||
|
||||
static const List<String> _categoryTitles = [
|
||||
'Counterattack Life',
|
||||
'Reborn And Returned',
|
||||
'God Of War Returns',
|
||||
];
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.fromLTRB(16, 10, 16, 92),
|
||||
child: Column(
|
||||
children: [
|
||||
const _RankingSection(items: _rankingItems),
|
||||
const SizedBox(height: 18),
|
||||
const _ActorSection(actor: _actor, items: _seriesItems),
|
||||
const SizedBox(height: 18),
|
||||
..._categoryTitles.map((title) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(bottom: 18),
|
||||
child: _DramaShelfSection(title: title, items: _seriesItems),
|
||||
);
|
||||
}),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _RankingSection extends StatelessWidget {
|
||||
const _RankingSection({required this.items});
|
||||
|
||||
final List<_DramaItem> items;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.all(5),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
border: Border.all(color: Colors.black, width: 2),
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
SizedBox(
|
||||
height: 230,
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Expanded(flex: 6, child: _TopRankingPoster(item: items.first)),
|
||||
const SizedBox(width: 8),
|
||||
Expanded(
|
||||
flex: 5,
|
||||
child: Column(
|
||||
children: List.generate(3, (index) {
|
||||
return Expanded(
|
||||
child: _RankingListItem(
|
||||
rank: index + 2,
|
||||
item: items[index + 1],
|
||||
),
|
||||
);
|
||||
}),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 5),
|
||||
const _GreenActionButton(text: 'View more rankings'),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _TopRankingPoster extends StatelessWidget {
|
||||
const _TopRankingPoster({required this.item});
|
||||
|
||||
final _DramaItem item;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Expanded(
|
||||
child: Stack(
|
||||
children: [
|
||||
Positioned.fill(
|
||||
child: _PosterBlock(item: item, showLargeTitle: true),
|
||||
),
|
||||
Positioned(
|
||||
top: 4,
|
||||
left: 5,
|
||||
child: NovyText(
|
||||
'1',
|
||||
color: ConstColor.btGreen,
|
||||
fontSize: 36,
|
||||
fontFamily: ConstFont.montBlack,
|
||||
shadow: const Shadow(
|
||||
offset: Offset(1.5, 1.5),
|
||||
color: Colors.black,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
NovyText(
|
||||
item.title,
|
||||
color: Colors.black,
|
||||
fontSize: 14,
|
||||
fontFamily: ConstFont.montMedium,
|
||||
),
|
||||
const SizedBox(height: 5),
|
||||
NyTagWidget(text: item.category),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _RankingListItem extends StatelessWidget {
|
||||
const _RankingListItem({required this.rank, required this.item});
|
||||
|
||||
final int rank;
|
||||
final _DramaItem item;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final Color rankColor = rank == 4
|
||||
? const Color(0xFFBBBBBB)
|
||||
: ConstColor.btGreen;
|
||||
return Row(
|
||||
children: [
|
||||
SizedBox(width: 42, height: 64, child: _PosterBlock(item: item)),
|
||||
const SizedBox(width: 6),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
NovyText(
|
||||
'$rank',
|
||||
color: rankColor,
|
||||
fontSize: 19,
|
||||
fontFamily: ConstFont.montBlack,
|
||||
lineHeight: 1,
|
||||
),
|
||||
const SizedBox(height: 3),
|
||||
NovyText(
|
||||
item.title,
|
||||
color: Colors.black,
|
||||
fontSize: 11,
|
||||
fontFamily: ConstFont.montBold,
|
||||
maxLines: 1,
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
NyTagWidget(text: item.category),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _ActorSection extends StatelessWidget {
|
||||
const _ActorSection({required this.actor, required this.items});
|
||||
|
||||
final _ActorInfo actor;
|
||||
final List<_DramaItem> items;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return CutCornerClipper(
|
||||
cutCorner: CutCorner.topLeft,
|
||||
cutSize: 66,
|
||||
child: Stack(
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.fromLTRB(10, 18, 10, 10),
|
||||
child: Column(
|
||||
children: [
|
||||
const _CornerEyes(),
|
||||
const SizedBox(height: 4),
|
||||
_OutlinedTitle('Read This Series Of Short Plays', fontSize: 19),
|
||||
const SizedBox(height: 26),
|
||||
const _ActorAvatar(),
|
||||
const SizedBox(height: 10),
|
||||
NovyText(
|
||||
actor.name,
|
||||
color: Colors.black,
|
||||
fontSize: 22,
|
||||
fontFamily: ConstFont.montBlack,
|
||||
),
|
||||
const SizedBox(height: 10),
|
||||
NovyText(
|
||||
actor.tags,
|
||||
color: const Color(0xFF888888),
|
||||
fontSize: 13,
|
||||
fontFamily: ConstFont.montRegular,
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
_ActorStats(actor: actor),
|
||||
const SizedBox(height: 8),
|
||||
_SectionHeader(title: 'Series'),
|
||||
const SizedBox(height: 8),
|
||||
_SeriesGrid(items: items, showTags: false),
|
||||
const SizedBox(height: 12),
|
||||
const _PagerDots(),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _DramaShelfSection extends StatelessWidget {
|
||||
const _DramaShelfSection({required this.title, required this.items});
|
||||
|
||||
final String title;
|
||||
final List<_DramaItem> items;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return CutCornerClipper(
|
||||
cutSize: 40,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.fromLTRB(8, 14, 8, 8),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
const _GripBars(),
|
||||
const SizedBox(height: 8),
|
||||
_OutlinedTitle(title, fontSize: 19),
|
||||
const SizedBox(height: 12),
|
||||
Row(
|
||||
children: List.generate(3, (index) {
|
||||
return Expanded(
|
||||
child: Padding(
|
||||
padding: EdgeInsets.only(right: index == 2 ? 0 : 8),
|
||||
child: _SeriesCard(item: items[index], showTag: true),
|
||||
),
|
||||
);
|
||||
}),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
const _GreenActionButton(text: 'Click to watch'),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _SeriesGrid extends StatelessWidget {
|
||||
const _SeriesGrid({required this.items, required this.showTags});
|
||||
|
||||
final List<_DramaItem> items;
|
||||
final bool showTags;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return GridView.builder(
|
||||
padding: EdgeInsets.zero,
|
||||
itemCount: items.length,
|
||||
shrinkWrap: true,
|
||||
physics: const NeverScrollableScrollPhysics(),
|
||||
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
|
||||
crossAxisCount: 3,
|
||||
crossAxisSpacing: 9,
|
||||
mainAxisSpacing: 10,
|
||||
childAspectRatio: 0.47,
|
||||
),
|
||||
itemBuilder: (context, index) {
|
||||
return _SeriesCard(item: items[index], showTag: showTags);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _SeriesCard extends StatelessWidget {
|
||||
const _SeriesCard({required this.item, required this.showTag});
|
||||
|
||||
final _DramaItem item;
|
||||
final bool showTag;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
AspectRatio(
|
||||
aspectRatio: 0.68,
|
||||
child: _PosterBlock(item: item, showLargeTitle: true),
|
||||
),
|
||||
const SizedBox(height: 7),
|
||||
NovyText(
|
||||
item.title,
|
||||
color: Colors.black,
|
||||
fontSize: 14,
|
||||
lineHeight: 1.05,
|
||||
fontFamily: ConstFont.montMedium,
|
||||
maxLines: 2,
|
||||
),
|
||||
if (showTag) ...[
|
||||
const SizedBox(height: 7),
|
||||
NyTagWidget(text: item.category),
|
||||
],
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _PosterBlock extends StatelessWidget {
|
||||
const _PosterBlock({required this.item, this.showLargeTitle = false});
|
||||
|
||||
final _DramaItem item;
|
||||
final bool showLargeTitle;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
colors: item.palette,
|
||||
),
|
||||
),
|
||||
child: Stack(
|
||||
children: [
|
||||
Positioned(
|
||||
top: 12,
|
||||
left: 10,
|
||||
right: 10,
|
||||
child: Container(
|
||||
height: showLargeTitle ? 74 : 28,
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white.withValues(alpha: 0.2),
|
||||
borderRadius: BorderRadius.circular(80),
|
||||
),
|
||||
),
|
||||
),
|
||||
Positioned(
|
||||
left: 7,
|
||||
right: 7,
|
||||
bottom: 10,
|
||||
child: NovyText(
|
||||
showLargeTitle ? 'CITIES\nOF SMOKE\nSTARLIGHT' : item.title,
|
||||
color: Colors.white,
|
||||
fontSize: showLargeTitle ? 17 : 8,
|
||||
lineHeight: 0.95,
|
||||
textAlign: TextAlign.center,
|
||||
fontFamily: ConstFont.montBlack,
|
||||
maxLines: showLargeTitle ? 3 : 2,
|
||||
shadow: const Shadow(offset: Offset(1, 1), color: Colors.black54),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _ActorAvatar extends StatelessWidget {
|
||||
const _ActorAvatar();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
width: 116,
|
||||
height: 116,
|
||||
decoration: const BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
colors: [Color(0xFFFFA6D9), Color(0xFFFFE6F5)],
|
||||
),
|
||||
),
|
||||
child: Center(
|
||||
child: Container(
|
||||
width: 58,
|
||||
height: 58,
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white.withValues(alpha: 0.55),
|
||||
borderRadius: BorderRadius.circular(18),
|
||||
),
|
||||
child: const Icon(Icons.person, size: 44, color: Color(0xFF8E2A55)),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _ActorStats extends StatelessWidget {
|
||||
const _ActorStats({required this.actor});
|
||||
|
||||
final _ActorInfo actor;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final List<List<String>> stats = [
|
||||
[actor.bornYear, 'Born Year'],
|
||||
[actor.height, 'Height'],
|
||||
[actor.nationality, 'Nationality'],
|
||||
];
|
||||
return Container(
|
||||
height: 68,
|
||||
decoration: BoxDecoration(
|
||||
color: const Color(0xFFF4F4F4),
|
||||
border: Border.all(color: const Color(0xFFD8D8D8)),
|
||||
),
|
||||
child: Row(
|
||||
children: List.generate(stats.length, (index) {
|
||||
return Expanded(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
NovyText(
|
||||
stats[index][0],
|
||||
color: Colors.black,
|
||||
fontSize: 18,
|
||||
fontFamily: ConstFont.montMedium,
|
||||
),
|
||||
const SizedBox(height: 7),
|
||||
NovyText(
|
||||
stats[index][1],
|
||||
color: const Color(0xFF777777),
|
||||
fontSize: 13,
|
||||
fontFamily: ConstFont.montRegular,
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _SectionHeader extends StatelessWidget {
|
||||
const _SectionHeader({required this.title});
|
||||
|
||||
final String title;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Align(
|
||||
alignment: Alignment.centerLeft,
|
||||
child: NovyText(
|
||||
title,
|
||||
color: Colors.black,
|
||||
fontSize: 19,
|
||||
fontFamily: ConstFont.montBlack,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _OutlinedTitle extends StatelessWidget {
|
||||
const _OutlinedTitle(this.text, {required this.fontSize});
|
||||
|
||||
final String text;
|
||||
final double fontSize;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Stack(
|
||||
children: [
|
||||
Text(
|
||||
text,
|
||||
maxLines: 2,
|
||||
style: TextStyle(
|
||||
fontSize: fontSize,
|
||||
height: 1.05,
|
||||
fontFamily: ConstFont.montBlack,
|
||||
foreground: Paint()
|
||||
..style = PaintingStyle.stroke
|
||||
..strokeWidth = 3.5
|
||||
..color = Colors.black,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
text,
|
||||
maxLines: 2,
|
||||
style: TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: fontSize,
|
||||
height: 1.05,
|
||||
fontFamily: ConstFont.montBlack,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _GreenActionButton extends StatelessWidget {
|
||||
const _GreenActionButton({required this.text});
|
||||
|
||||
final String text;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return ClipPath(
|
||||
clipper: const EqualCutCornerClipper(
|
||||
cutSize: 18,
|
||||
corner: CutCorner.bottomLeft,
|
||||
),
|
||||
child: Container(
|
||||
height: 34,
|
||||
decoration: BoxDecoration(
|
||||
color: ConstColor.btGreen,
|
||||
border: Border.all(color: Colors.black, width: 2),
|
||||
),
|
||||
child: Stack(
|
||||
children: [
|
||||
const Positioned(left: 22, top: 6, child: _GripBars()),
|
||||
const Positioned(right: 10, bottom: 4, child: _GripBars()),
|
||||
Center(
|
||||
child: NovyText(
|
||||
text,
|
||||
color: Colors.black,
|
||||
fontSize: 14,
|
||||
fontFamily: ConstFont.montBlack,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _CornerEyes extends StatelessWidget {
|
||||
const _CornerEyes();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return SizedBox(
|
||||
height: 18,
|
||||
child: Stack(
|
||||
clipBehavior: Clip.none,
|
||||
children: [
|
||||
Positioned(
|
||||
left: -3,
|
||||
top: -38,
|
||||
child: Transform.rotate(
|
||||
angle: 0.68,
|
||||
child: Container(
|
||||
width: 34,
|
||||
height: 84,
|
||||
color: ConstColor.btGreen,
|
||||
),
|
||||
),
|
||||
),
|
||||
const Positioned(left: 18, top: -12, child: _EyeDot()),
|
||||
const Positioned(left: 38, top: -18, child: _EyeDot()),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _EyeDot extends StatelessWidget {
|
||||
const _EyeDot();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
width: 22,
|
||||
height: 26,
|
||||
decoration: const BoxDecoration(
|
||||
color: Colors.white,
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
child: Align(
|
||||
alignment: Alignment.topRight,
|
||||
child: Container(
|
||||
width: 10,
|
||||
height: 10,
|
||||
margin: const EdgeInsets.only(top: 2, right: 2),
|
||||
decoration: const BoxDecoration(
|
||||
color: Colors.black,
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _PagerDots extends StatelessWidget {
|
||||
const _PagerDots();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: List.generate(7, (index) {
|
||||
return Container(
|
||||
width: index == 1 ? 26 : 7,
|
||||
height: 7,
|
||||
margin: const EdgeInsets.symmetric(horizontal: 3),
|
||||
color: index == 1 ? ConstColor.btGreen : const Color(0xFFD9D9D9),
|
||||
);
|
||||
}),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _GripBars extends StatelessWidget {
|
||||
const _GripBars();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: List.generate(4, (index) {
|
||||
return Container(
|
||||
width: 3,
|
||||
height: 8,
|
||||
margin: const EdgeInsets.only(right: 2),
|
||||
color: Colors.black,
|
||||
);
|
||||
}),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _DramaItem {
|
||||
const _DramaItem({
|
||||
required this.title,
|
||||
required this.category,
|
||||
required this.palette,
|
||||
});
|
||||
|
||||
final String title;
|
||||
final String category;
|
||||
final List<Color> palette;
|
||||
}
|
||||
|
||||
class _ActorInfo {
|
||||
const _ActorInfo({
|
||||
required this.name,
|
||||
required this.tags,
|
||||
required this.bornYear,
|
||||
required this.height,
|
||||
required this.nationality,
|
||||
});
|
||||
|
||||
final String name;
|
||||
final String tags;
|
||||
final String bornYear;
|
||||
final String height;
|
||||
final String nationality;
|
||||
}
|
||||
@@ -0,0 +1,90 @@
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_screenutil/flutter_screenutil.dart';
|
||||
import 'package:novyronst/common/help/help_image.dart';
|
||||
import 'package:novyronst/tools/widgets/novy_com_widget.dart';
|
||||
|
||||
|
||||
class RecentHistoryView extends StatelessWidget {
|
||||
const RecentHistoryView({super.key,
|
||||
required this.searchHistory,
|
||||
this.onTapHistory,
|
||||
this.onTapClear,
|
||||
});
|
||||
|
||||
final List<String> searchHistory;
|
||||
final ValueChanged<String>? onTapHistory;
|
||||
final Function()? onTapClear;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 15.w),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Expanded(child: NovyText('Recent Searches',
|
||||
fontSize: 14,
|
||||
color: Colors.white,
|
||||
fontWeight: FontWeight.bold,
|
||||
lineHeight: 1,
|
||||
)),
|
||||
InkWell(onTap: () {
|
||||
onTapClear?.call();
|
||||
}, child: HelpImage.asset(ConstImage.remove, width: 36, height: 36)),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Wrap(
|
||||
spacing: 16.w,
|
||||
runSpacing: 14.h,
|
||||
children: searchHistory
|
||||
.map(
|
||||
(item) => _HistoryChip(
|
||||
text: item,
|
||||
onTap: () => onTapHistory?.call(item),
|
||||
),
|
||||
)
|
||||
.toList(),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
class _HistoryChip extends StatelessWidget {
|
||||
const _HistoryChip({
|
||||
required this.text,
|
||||
this.onTap,
|
||||
});
|
||||
|
||||
final String text;
|
||||
final VoidCallback? onTap;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return InkWell(
|
||||
onTap: onTap,
|
||||
child: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 5.h),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white.withAlpha(39),
|
||||
borderRadius: BorderRadius.circular(6),
|
||||
),
|
||||
child: Text(
|
||||
text,
|
||||
style: TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: 12.sp,
|
||||
fontWeight: FontWeight.w500,
|
||||
height: 1,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,9 +1,18 @@
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_screenutil/flutter_screenutil.dart';
|
||||
import 'package:novyronst/root/lib_export.dart';
|
||||
import 'package:novyronst/tools/widgets/extend_widget.dart';
|
||||
import 'package:novyronst/tools/widgets/novy_com_widget.dart';
|
||||
|
||||
class HomeSearchView extends StatefulWidget {
|
||||
const HomeSearchView({super.key});
|
||||
const HomeSearchView({super.key,
|
||||
this.onlyTap = false,
|
||||
this.onTap,
|
||||
});
|
||||
|
||||
final bool onlyTap;
|
||||
final Function()? onTap;
|
||||
|
||||
@override
|
||||
State<StatefulWidget> createState() {
|
||||
@@ -39,7 +48,12 @@ class _SearchViewState extends State<HomeSearchView> {
|
||||
children: [
|
||||
Icon(Icons.search, color: Colors.white, size: 24),
|
||||
|
||||
Expanded(child: CupertinoTextField(
|
||||
Expanded(child:widget.onlyTap
|
||||
? NovyText('What are...... ',
|
||||
fontSize: 13,
|
||||
color: Colors.white.withAlpha(127),
|
||||
)
|
||||
: CupertinoTextField(
|
||||
controller: _searchController,
|
||||
// focusNode: widget.focusNode,
|
||||
decoration: BoxDecoration(),
|
||||
@@ -60,8 +74,7 @@ class _SearchViewState extends State<HomeSearchView> {
|
||||
),),
|
||||
|
||||
HelpImage.asset(ConstImage.homeSearch, width: 78, height: 36, fit: BoxFit.fill)
|
||||
|
||||
|
||||
|
||||
],
|
||||
),
|
||||
)
|
||||
@@ -71,8 +84,78 @@ class _SearchViewState extends State<HomeSearchView> {
|
||||
],
|
||||
),
|
||||
),
|
||||
).addInkWell(onTap: widget.onlyTap ? widget.onTap : null);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/// 搜索页面的搜索框
|
||||
class SeSearchView extends StatefulWidget {
|
||||
const SeSearchView({super.key,
|
||||
this.onClickSearch,
|
||||
});
|
||||
|
||||
final Function(String)? onClickSearch;
|
||||
|
||||
@override
|
||||
State<StatefulWidget> createState() {
|
||||
return _SeSearchViewState();
|
||||
}
|
||||
}
|
||||
|
||||
class _SeSearchViewState extends State<SeSearchView> {
|
||||
|
||||
final _searchController = TextEditingController();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
height: 44,
|
||||
padding: EdgeInsets.only(top: 4, bottom: 4),
|
||||
child: Stack(
|
||||
children: [
|
||||
HelpImage.asset(ConstImage.searchBg, height: 36, fit: BoxFit.fill),
|
||||
Padding(
|
||||
padding: EdgeInsets.only(left: 11),
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(Icons.search, color: Colors.white, size: 24),
|
||||
|
||||
Expanded(child: CupertinoTextField(
|
||||
controller: _searchController,
|
||||
// focusNode: widget.focusNode,
|
||||
decoration: BoxDecoration(),
|
||||
placeholder: 'What are...... ',
|
||||
placeholderStyle: TextStyle(
|
||||
fontSize: 13,
|
||||
color: Colors.white.withAlpha(127),
|
||||
),
|
||||
style: TextStyle(
|
||||
fontSize: 14,
|
||||
color: Colors.white,
|
||||
),
|
||||
textInputAction: TextInputAction.search,
|
||||
onEditingComplete: () {
|
||||
if (_searchController.text.trim().isNotEmpty) {
|
||||
widget.onClickSearch?.call(_searchController.text);
|
||||
}
|
||||
},
|
||||
),),
|
||||
|
||||
HelpImage.asset(ConstImage.homeSearch,
|
||||
width: 78, height: 36, fit: BoxFit.fill
|
||||
).addInkWell(onTap: () {
|
||||
if (_searchController.text.trim().isNotEmpty) {
|
||||
widget.onClickSearch?.call(_searchController.text);
|
||||
}
|
||||
})
|
||||
|
||||
],
|
||||
),
|
||||
)
|
||||
],
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
Reference in new issue
Block a user