feat: UI pages
This commit is contained in:
chengsiwen committed
1 parent
fbcd33ea2b
commit
197c3e9b88
41 files changed
+1270
-274
No files matched your search
@@ -0,0 +1,155 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:skywood/main/lib_file.dart';
|
||||
import 'package:skywood/pages/widgets/pixel_widgets.dart';
|
||||
import 'package:skywood/utils/tools/widgets/sky_app_bar.dart';
|
||||
import 'package:skywood/utils/tools/widgets/sky_common_widget.dart';
|
||||
|
||||
import '../../../utils/tools/widgets/sky_text_field.dart';
|
||||
|
||||
class ResultPage extends StatefulWidget {
|
||||
|
||||
const ResultPage({super.key,
|
||||
required this.keyword,
|
||||
});
|
||||
|
||||
final String keyword;
|
||||
|
||||
@override
|
||||
State<StatefulWidget> createState() {
|
||||
return _ResultPageState();
|
||||
}
|
||||
}
|
||||
|
||||
class _ResultPageState extends State<ResultPage> {
|
||||
|
||||
List<String> _searchHistory = [];
|
||||
final _searchController = TextEditingController();
|
||||
final _searchFocus = FocusNode();
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
|
||||
_searchController.text = widget.keyword;
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: SkyAppBar(
|
||||
|
||||
titleWidget: SkyTextField(
|
||||
controller: _searchController,
|
||||
focusNode: _searchFocus,
|
||||
border: Border.all(width: 0.6, color: CommonColor.black),
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
width: 300, height: 36,
|
||||
placeholder: 'Search',
|
||||
prefix: HelpImg.asset(ConstImg.search, width: 14.w, height: 14.w),
|
||||
textInputAction: TextInputAction.search,
|
||||
onEditingComplete: () {
|
||||
print('object');
|
||||
_searchFocus.unfocus();
|
||||
if (_searchController.text.trim().isEmpty) return;
|
||||
// _onGoSearch(_searchController.text);
|
||||
},
|
||||
),
|
||||
),
|
||||
body: ListView.separated(
|
||||
itemBuilder: (context, index) => ResultItemView(),
|
||||
separatorBuilder: (context, index) => SizedBox(height: 12),
|
||||
itemCount: 2
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class ResultItemView extends StatelessWidget {
|
||||
|
||||
const ResultItemView({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
height: 140.h,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 15),
|
||||
child: Row(
|
||||
children: [
|
||||
PosterImage(width: 105.w, height: 140.h),
|
||||
const SizedBox(width: 10),
|
||||
Expanded(child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
SkyText(text: 'Love in the City of Twilight',
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: CommonColor.black,
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
_tagView(),
|
||||
const SizedBox(height: 12),
|
||||
SkyText(text: 'Haunted by fading memories, a man navigates a labyrinth of dreams and reality ds dsajkj',
|
||||
fontSize: 11,
|
||||
color: CommonColor.withValue('4D4047'),
|
||||
maxLines: 2,
|
||||
),
|
||||
Spacer(),
|
||||
Row(
|
||||
children: [
|
||||
_tipView(true, text: '10.0'),
|
||||
const SizedBox(width: 15),
|
||||
_tipView(false, text: '10.2k'),
|
||||
],
|
||||
)
|
||||
],
|
||||
))
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _tipView(bool isStar, {required String text}) {
|
||||
String imgName = isStar ? ConstImg.star : ConstImg.look;
|
||||
return Row(
|
||||
children: [
|
||||
HelpImg.asset(imgName, width: 12.w, height: 12.w),
|
||||
const SizedBox(width: 2),
|
||||
SkyText(text: text, fontSize: 10, color: Colors.grey)
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _tagView() {
|
||||
return Container(
|
||||
padding: const EdgeInsets.only(top: 3, left: 6, right: 6, bottom: 4),
|
||||
decoration: ShapeDecoration(
|
||||
color: const Color(0xFFEBFFE5),
|
||||
shape: RoundedRectangleBorder(
|
||||
side: BorderSide(
|
||||
width: 0.50,
|
||||
color: const Color(0xFF9BE89C),
|
||||
),
|
||||
borderRadius: BorderRadius.circular(1),
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
spacing: 10,
|
||||
children: [
|
||||
Text(
|
||||
'Satisfying',
|
||||
style: TextStyle(
|
||||
color: const Color(0xFF040408) /* 主题黑 */,
|
||||
fontSize: 10,
|
||||
fontFamily: 'Inter',
|
||||
fontWeight: FontWeight.w400,
|
||||
height: 1,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,209 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:skywood/main/lib_file.dart';
|
||||
import 'package:skywood/pages/search/page/result_page.dart';
|
||||
import 'package:skywood/pages/search/widget/search_util.dart';
|
||||
import 'package:skywood/pages/search/widget/search_view.dart';
|
||||
import 'package:skywood/pages/widgets/pixel_widgets.dart';
|
||||
import 'package:skywood/utils/tools/help_nav.dart';
|
||||
import 'package:skywood/utils/tools/widgets/sky_app_bar.dart';
|
||||
import 'package:skywood/utils/tools/widgets/sky_text_field.dart';
|
||||
|
||||
class SearchPage extends StatefulWidget {
|
||||
const SearchPage({super.key});
|
||||
|
||||
@override
|
||||
State<StatefulWidget> createState() {
|
||||
return _MainRootState();
|
||||
}
|
||||
}
|
||||
|
||||
class _MainRootState extends State<SearchPage> {
|
||||
|
||||
List<String> _searchHistory = [];
|
||||
final _searchController = TextEditingController();
|
||||
final _searchFocus = FocusNode();
|
||||
|
||||
final List<String> _titles = const [
|
||||
"Mr. Gu's Sweet Weakness",
|
||||
'Secret Wife with a Scar',
|
||||
'A Second Chance at Love',
|
||||
'Shadows of the Heart',
|
||||
'Boarding Pass To Love',
|
||||
'The Love Blueprint',
|
||||
'Who Dared Touch My Bride',
|
||||
'Famous Families Fled',
|
||||
];
|
||||
|
||||
Future<void> _loadSearchHistory() async {
|
||||
final list = await SearchUtil.getSearchList();
|
||||
if (!mounted) return;
|
||||
setState(() {
|
||||
_searchHistory = list;
|
||||
});
|
||||
}
|
||||
|
||||
Future<void> _onGoSearch(String keyword, {bool isTapKey = false}) async {
|
||||
if (isTapKey == true) {
|
||||
|
||||
} else {
|
||||
await SearchUtil.addSearch(keyword);
|
||||
await _loadSearchHistory();
|
||||
}
|
||||
HelpNav.to(ResultPage(
|
||||
keyword: keyword,
|
||||
));
|
||||
// 发起 搜索
|
||||
|
||||
}
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
|
||||
_loadSearchHistory();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: SkyAppBar(
|
||||
showBackButton: false,
|
||||
titleWidget: SkyTextField(
|
||||
controller: _searchController,
|
||||
focusNode: _searchFocus,
|
||||
border: Border.all(width: 0.6, color: CommonColor.black),
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
width: 300, height: 36,
|
||||
placeholder: 'Search',
|
||||
prefix: HelpImg.asset(ConstImg.search, width: 14.w, height: 14.w),
|
||||
textInputAction: TextInputAction.search,
|
||||
onEditingComplete: () {
|
||||
print('object');
|
||||
_searchFocus.unfocus();
|
||||
if (_searchController.text.trim().isEmpty) return;
|
||||
_onGoSearch(_searchController.text);
|
||||
},
|
||||
),
|
||||
),
|
||||
body: CustomScrollView(
|
||||
slivers: [
|
||||
SliverToBoxAdapter(child: _buildHistory()),
|
||||
SliverToBoxAdapter(child: SizedBox(height: 30.h)),
|
||||
SliverToBoxAdapter(child: _buildTitle('Trending Now')),
|
||||
SliverToBoxAdapter(child: SizedBox(height: 10.h)),
|
||||
SliverToBoxAdapter(child: _buildTrendingList()),
|
||||
SliverToBoxAdapter(child: SizedBox(height: 20.h)),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Widget _buildHistory() {
|
||||
return SearchView(
|
||||
searchHistory: _searchHistory,
|
||||
onTapClear: () {
|
||||
_searchHistory.clear();
|
||||
setState(() {});
|
||||
},
|
||||
onTapHistory: (value) {
|
||||
print('object: $value');
|
||||
HelpNav.to(ResultPage(keyword: value));
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildTitle(String title, {double fontSize = 18}) {
|
||||
return Padding(
|
||||
padding: EdgeInsets.symmetric(horizontal: 15.w),
|
||||
child: Text(
|
||||
title,
|
||||
style: TextStyle(
|
||||
color: CommonColor.black,
|
||||
fontSize: fontSize.sp,
|
||||
fontWeight: FontWeight.w700,
|
||||
height: 1.1,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildTrendingList() {
|
||||
return SizedBox(
|
||||
height: 446.h,
|
||||
child: SingleChildScrollView(
|
||||
scrollDirection: Axis.horizontal,
|
||||
padding: EdgeInsets.symmetric(horizontal: 15.w),
|
||||
child: Wrap(
|
||||
direction: Axis.vertical,
|
||||
spacing: 10.h,
|
||||
runSpacing: 10.w,
|
||||
children: _titles
|
||||
.map((title) => _TrendingItem(title: title))
|
||||
.toList(),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _TrendingItem extends StatelessWidget {
|
||||
const _TrendingItem({required this.title});
|
||||
|
||||
final String title;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return SizedBox(
|
||||
width: 236.w,
|
||||
height: 104.h,
|
||||
child: Row(
|
||||
children: [
|
||||
const PosterImage(
|
||||
width: 80,
|
||||
height: 104,
|
||||
borderRadius: 4,
|
||||
showBorder: false,
|
||||
),
|
||||
SizedBox(width: 8.w),
|
||||
Expanded(
|
||||
child: Padding(
|
||||
padding: EdgeInsets.symmetric(vertical: 10.h),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Text(
|
||||
title,
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: TextStyle(
|
||||
color: CommonColor.black,
|
||||
fontSize: 13.sp,
|
||||
fontWeight: FontWeight.bold,
|
||||
height: 1.2,
|
||||
),
|
||||
),
|
||||
Row(
|
||||
children: [
|
||||
HelpImg.asset(ConstImg.hot, width: 15.w, height: 15.w),
|
||||
SizedBox(width: 2.w),
|
||||
Text(
|
||||
'17.3K',
|
||||
style: TextStyle(
|
||||
color: const Color(0x80000000),
|
||||
fontSize: 13.w,
|
||||
height: 1,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user