|
|
@ -1,3 +1,4 @@ |
|
|
|
|
|
import 'package:dating_touchme_app/generated/assets.dart'; |
|
|
import 'package:flutter/cupertino.dart'; |
|
|
import 'package:flutter/cupertino.dart'; |
|
|
import 'package:flutter/material.dart'; |
|
|
import 'package:flutter/material.dart'; |
|
|
|
|
|
|
|
|
@ -8,16 +9,407 @@ class HomePage extends StatefulWidget { |
|
|
State<HomePage> createState() => _HomePageState(); |
|
|
State<HomePage> createState() => _HomePageState(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
class _HomePageState extends State<HomePage> with AutomaticKeepAliveClientMixin{ |
|
|
|
|
|
|
|
|
class _HomePageState extends State<HomePage> with AutomaticKeepAliveClientMixin { |
|
|
|
|
|
int selectedTabIndex = 0; // 0: 推荐 1: 同城 |
|
|
|
|
|
|
|
|
|
|
|
// 简单的示例数据结构 |
|
|
|
|
|
final List<_FeedItem> recommendFeed = [ |
|
|
|
|
|
_FeedItem(type: _FeedType.withImages), |
|
|
|
|
|
_FeedItem(type: _FeedType.plain), |
|
|
|
|
|
_FeedItem(type: _FeedType.live), |
|
|
|
|
|
_FeedItem(type: _FeedType.withImages), |
|
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
|
|
final List<_FeedItem> nearbyFeed = [ |
|
|
|
|
|
_FeedItem(type: _FeedType.plain), |
|
|
|
|
|
_FeedItem(type: _FeedType.withImages), |
|
|
|
|
|
_FeedItem(type: _FeedType.live), |
|
|
|
|
|
]; |
|
|
|
|
|
|
|
|
@override |
|
|
@override |
|
|
Widget build(BuildContext context) { |
|
|
Widget build(BuildContext context) { |
|
|
super.build(context); |
|
|
super.build(context); |
|
|
return Container( |
|
|
|
|
|
color: Colors.white, |
|
|
|
|
|
|
|
|
final List<_FeedItem> dataSource = |
|
|
|
|
|
selectedTabIndex == 0 ? recommendFeed : nearbyFeed; |
|
|
|
|
|
|
|
|
|
|
|
return Scaffold( |
|
|
|
|
|
backgroundColor: Colors.white, |
|
|
|
|
|
appBar: _buildAppBar(), |
|
|
|
|
|
body: ListView.separated( |
|
|
|
|
|
physics: const BouncingScrollPhysics(), |
|
|
|
|
|
itemBuilder: (context, index) { |
|
|
|
|
|
final item = dataSource[index]; |
|
|
|
|
|
switch (item.type) { |
|
|
|
|
|
case _FeedType.withImages: |
|
|
|
|
|
return ImagesCard(); |
|
|
|
|
|
case _FeedType.plain: |
|
|
|
|
|
return PlainCard(); |
|
|
|
|
|
case _FeedType.live: |
|
|
|
|
|
return LiveCard(); |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
separatorBuilder: (context, index) => const SizedBox(height: 12), |
|
|
|
|
|
itemCount: dataSource.length, |
|
|
|
|
|
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 12), |
|
|
|
|
|
), |
|
|
|
|
|
); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
PreferredSizeWidget _buildAppBar() { |
|
|
|
|
|
return AppBar( |
|
|
|
|
|
backgroundColor: Colors.white, |
|
|
|
|
|
elevation: 0, |
|
|
|
|
|
centerTitle: false, |
|
|
|
|
|
toolbarHeight: 56, |
|
|
|
|
|
titleSpacing: 16, |
|
|
|
|
|
title: Row( |
|
|
|
|
|
children: [ |
|
|
|
|
|
_buildTabButton(title: '推荐', index: 0), |
|
|
|
|
|
const SizedBox(width: 16), |
|
|
|
|
|
_buildTabButton(title: '同城', index: 1), |
|
|
|
|
|
const Spacer(), |
|
|
|
|
|
Image.asset( |
|
|
|
|
|
Assets.imagesOnlineIcon, |
|
|
|
|
|
width: 20, |
|
|
|
|
|
height: 20, |
|
|
|
|
|
), |
|
|
|
|
|
], |
|
|
|
|
|
), |
|
|
|
|
|
bottom: PreferredSize( |
|
|
|
|
|
preferredSize: const Size.fromHeight(8), |
|
|
|
|
|
child: const SizedBox(height: 8), |
|
|
|
|
|
), |
|
|
); |
|
|
); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
Widget _buildTabButton({required String title, required int index}) { |
|
|
|
|
|
final bool selected = selectedTabIndex == index; |
|
|
|
|
|
return GestureDetector( |
|
|
|
|
|
onTap: () { |
|
|
|
|
|
if (selectedTabIndex != index) { |
|
|
|
|
|
setState(() { |
|
|
|
|
|
selectedTabIndex = index; |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
child: Column( |
|
|
|
|
|
crossAxisAlignment: CrossAxisAlignment.start, |
|
|
|
|
|
children: [ |
|
|
|
|
|
Text( |
|
|
|
|
|
title, |
|
|
|
|
|
style: TextStyle( |
|
|
|
|
|
fontSize: 22, |
|
|
|
|
|
fontWeight: FontWeight.w700, |
|
|
|
|
|
color: selected ? Colors.black : const Color(0xFF999999), |
|
|
|
|
|
), |
|
|
|
|
|
), |
|
|
|
|
|
const SizedBox(height: 4), |
|
|
|
|
|
AnimatedContainer( |
|
|
|
|
|
duration: const Duration(milliseconds: 200), |
|
|
|
|
|
height: 4, |
|
|
|
|
|
width: selected ? 28 : 0, |
|
|
|
|
|
decoration: BoxDecoration( |
|
|
|
|
|
color: const Color(0xFF6C63FF), |
|
|
|
|
|
borderRadius: BorderRadius.circular(2), |
|
|
|
|
|
), |
|
|
|
|
|
), |
|
|
|
|
|
], |
|
|
|
|
|
), |
|
|
|
|
|
); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 下面将卡片组件拆分为独立Widget，保持HomePage更简洁 |
|
|
|
|
|
|
|
|
@override |
|
|
@override |
|
|
bool get wantKeepAlive => true; |
|
|
bool get wantKeepAlive => true; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
enum _FeedType { withImages, plain, live } |
|
|
|
|
|
|
|
|
|
|
|
class _FeedItem { |
|
|
|
|
|
final _FeedType type; |
|
|
|
|
|
const _FeedItem({required this.type}); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 通用头部组件：头像/昵称/在线/认证/Hi/直播中徽标 |
|
|
|
|
|
class _CardHeader extends StatelessWidget { |
|
|
|
|
|
final bool showHi; |
|
|
|
|
|
// 是否在头像上显示直播态（紫色描边 + 头像角标） |
|
|
|
|
|
final bool liveOverlayOnAvatar; |
|
|
|
|
|
const _CardHeader({this.showHi = false, this.liveOverlayOnAvatar = false}); |
|
|
|
|
|
|
|
|
|
|
|
@override |
|
|
|
|
|
Widget build(BuildContext context) { |
|
|
|
|
|
return Row( |
|
|
|
|
|
crossAxisAlignment: CrossAxisAlignment.center, |
|
|
|
|
|
children: [ |
|
|
|
|
|
// 头像 + 在线小圆点 |
|
|
|
|
|
Stack( |
|
|
|
|
|
children: [ |
|
|
|
|
|
// 头像 + 可选紫色描边 |
|
|
|
|
|
Container( |
|
|
|
|
|
padding: liveOverlayOnAvatar ? const EdgeInsets.all(2) : EdgeInsets.zero, |
|
|
|
|
|
decoration: liveOverlayOnAvatar |
|
|
|
|
|
? BoxDecoration( |
|
|
|
|
|
borderRadius: BorderRadius.circular(32), |
|
|
|
|
|
border: Border.all(color: const Color(0xFFB58BFF), width: 2), |
|
|
|
|
|
) |
|
|
|
|
|
: null, |
|
|
|
|
|
child: ClipRRect( |
|
|
|
|
|
borderRadius: BorderRadius.circular(30), |
|
|
|
|
|
child: Image.asset( |
|
|
|
|
|
Assets.imagesAvatarsExample, |
|
|
|
|
|
width: 60, |
|
|
|
|
|
height: 60, |
|
|
|
|
|
fit: BoxFit.cover, |
|
|
|
|
|
), |
|
|
|
|
|
), |
|
|
|
|
|
), |
|
|
|
|
|
Positioned( |
|
|
|
|
|
left: 6, |
|
|
|
|
|
bottom: 6, |
|
|
|
|
|
child: Container( |
|
|
|
|
|
width: 12, |
|
|
|
|
|
height: 12, |
|
|
|
|
|
decoration: BoxDecoration( |
|
|
|
|
|
color: const Color(0xFF2ED573), |
|
|
|
|
|
shape: BoxShape.circle, |
|
|
|
|
|
boxShadow: const [ |
|
|
|
|
|
BoxShadow(color: Color(0x332ED573), blurRadius: 4, offset: Offset(0, 2)), |
|
|
|
|
|
], |
|
|
|
|
|
), |
|
|
|
|
|
), |
|
|
|
|
|
), |
|
|
|
|
|
if (liveOverlayOnAvatar) |
|
|
|
|
|
Positioned( |
|
|
|
|
|
left: -6, |
|
|
|
|
|
bottom: -6, |
|
|
|
|
|
child: Container( |
|
|
|
|
|
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4), |
|
|
|
|
|
decoration: BoxDecoration( |
|
|
|
|
|
color: const Color(0xFF7A5CFF), |
|
|
|
|
|
borderRadius: BorderRadius.circular(16), |
|
|
|
|
|
boxShadow: const [ |
|
|
|
|
|
BoxShadow(color: Color(0x337A5CFF), blurRadius: 6, offset: Offset(0, 3)), |
|
|
|
|
|
], |
|
|
|
|
|
), |
|
|
|
|
|
child: const Text( |
|
|
|
|
|
'直播中', |
|
|
|
|
|
style: TextStyle(color: Colors.white, fontSize: 12, fontWeight: FontWeight.w600), |
|
|
|
|
|
), |
|
|
|
|
|
), |
|
|
|
|
|
), |
|
|
|
|
|
], |
|
|
|
|
|
), |
|
|
|
|
|
const SizedBox(width: 10), |
|
|
|
|
|
Expanded( |
|
|
|
|
|
child: Column( |
|
|
|
|
|
crossAxisAlignment: CrossAxisAlignment.start, |
|
|
|
|
|
children: [ |
|
|
|
|
|
Row( |
|
|
|
|
|
children: [ |
|
|
|
|
|
const Text( |
|
|
|
|
|
'林园园', |
|
|
|
|
|
style: TextStyle( |
|
|
|
|
|
fontSize: 20, |
|
|
|
|
|
fontWeight: FontWeight.w700, |
|
|
|
|
|
color: Color(0xFF333333), |
|
|
|
|
|
), |
|
|
|
|
|
), |
|
|
|
|
|
const SizedBox(width: 6), |
|
|
|
|
|
// 在线徽标 |
|
|
|
|
|
Container( |
|
|
|
|
|
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2), |
|
|
|
|
|
decoration: BoxDecoration( |
|
|
|
|
|
color: const Color(0xFFEFFBF3), |
|
|
|
|
|
borderRadius: BorderRadius.circular(12), |
|
|
|
|
|
), |
|
|
|
|
|
child: const Text( |
|
|
|
|
|
'在线', |
|
|
|
|
|
style: TextStyle(fontSize: 12, color: Color(0xFF2ED573)), |
|
|
|
|
|
), |
|
|
|
|
|
), |
|
|
|
|
|
const SizedBox(width: 6), |
|
|
|
|
|
// 实名徽标 |
|
|
|
|
|
Container( |
|
|
|
|
|
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2), |
|
|
|
|
|
decoration: BoxDecoration( |
|
|
|
|
|
color: const Color(0xFFF3E9FF), |
|
|
|
|
|
borderRadius: BorderRadius.circular(12), |
|
|
|
|
|
), |
|
|
|
|
|
child: Row( |
|
|
|
|
|
children: [ |
|
|
|
|
|
Image.asset(Assets.imagesVerifiedIcon, width: 12, height: 12), |
|
|
|
|
|
const SizedBox(width: 4), |
|
|
|
|
|
const Text( |
|
|
|
|
|
'实名', |
|
|
|
|
|
style: TextStyle(fontSize: 12, color: Color(0xFF6C63FF)), |
|
|
|
|
|
), |
|
|
|
|
|
], |
|
|
|
|
|
), |
|
|
|
|
|
), |
|
|
|
|
|
], |
|
|
|
|
|
), |
|
|
|
|
|
const SizedBox(height: 4), |
|
|
|
|
|
const Text( |
|
|
|
|
|
'23岁 · 白云区', |
|
|
|
|
|
style: TextStyle(fontSize: 16, color: Color(0xFF666666)), |
|
|
|
|
|
), |
|
|
|
|
|
], |
|
|
|
|
|
), |
|
|
|
|
|
), |
|
|
|
|
|
if (showHi) |
|
|
|
|
|
Image.asset(Assets.imagesHiIcon, width: 64, height: 32), |
|
|
|
|
|
], |
|
|
|
|
|
); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
class PlainCard extends StatelessWidget { |
|
|
|
|
|
@override |
|
|
|
|
|
Widget build(BuildContext context) { |
|
|
|
|
|
return Container( |
|
|
|
|
|
decoration: BoxDecoration( |
|
|
|
|
|
color: Colors.white, |
|
|
|
|
|
borderRadius: BorderRadius.circular(12), |
|
|
|
|
|
boxShadow: const [ |
|
|
|
|
|
BoxShadow( |
|
|
|
|
|
color: Color(0x14000000), |
|
|
|
|
|
blurRadius: 8, |
|
|
|
|
|
offset: Offset(0, 4), |
|
|
|
|
|
), |
|
|
|
|
|
], |
|
|
|
|
|
), |
|
|
|
|
|
padding: const EdgeInsets.all(12), |
|
|
|
|
|
child: Column( |
|
|
|
|
|
crossAxisAlignment: CrossAxisAlignment.start, |
|
|
|
|
|
children: const [ |
|
|
|
|
|
_CardHeader(), |
|
|
|
|
|
SizedBox(height: 8), |
|
|
|
|
|
Text( |
|
|
|
|
|
'我想找一个有缘的异性，快来联系我吧快来……', |
|
|
|
|
|
style: TextStyle(fontSize: 13, color: Color(0xFF666666)), |
|
|
|
|
|
), |
|
|
|
|
|
], |
|
|
|
|
|
), |
|
|
|
|
|
); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
class ImagesCard extends StatelessWidget { |
|
|
|
|
|
const ImagesCard(); |
|
|
|
|
|
|
|
|
|
|
|
@override |
|
|
|
|
|
Widget build(BuildContext context) { |
|
|
|
|
|
return Container( |
|
|
|
|
|
decoration: BoxDecoration( |
|
|
|
|
|
color: Colors.white, |
|
|
|
|
|
borderRadius: BorderRadius.circular(16), |
|
|
|
|
|
boxShadow: const [ |
|
|
|
|
|
BoxShadow( |
|
|
|
|
|
color: Color(0x14000000), |
|
|
|
|
|
blurRadius: 12, |
|
|
|
|
|
offset: Offset(0, 6), |
|
|
|
|
|
), |
|
|
|
|
|
], |
|
|
|
|
|
), |
|
|
|
|
|
padding: const EdgeInsets.all(16), |
|
|
|
|
|
child: Column( |
|
|
|
|
|
crossAxisAlignment: CrossAxisAlignment.start, |
|
|
|
|
|
children: [ |
|
|
|
|
|
const _CardHeader(showHi: true), |
|
|
|
|
|
const SizedBox(height: 10), |
|
|
|
|
|
const Text( |
|
|
|
|
|
'我想找一个有缘的异性，快来联系我吧快来……', |
|
|
|
|
|
style: TextStyle(fontSize: 16, color: Color(0xFF666666)), |
|
|
|
|
|
), |
|
|
|
|
|
const SizedBox(height: 16), |
|
|
|
|
|
Row( |
|
|
|
|
|
children: const [ |
|
|
|
|
|
_BorderedImage(), |
|
|
|
|
|
SizedBox(width: 12), |
|
|
|
|
|
_BorderedImage(), |
|
|
|
|
|
SizedBox(width: 12), |
|
|
|
|
|
_BorderedImage(), |
|
|
|
|
|
], |
|
|
|
|
|
), |
|
|
|
|
|
], |
|
|
|
|
|
), |
|
|
|
|
|
); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
class LiveCard extends StatelessWidget { |
|
|
|
|
|
@override |
|
|
|
|
|
Widget build(BuildContext context) { |
|
|
|
|
|
return Container( |
|
|
|
|
|
decoration: BoxDecoration( |
|
|
|
|
|
color: Colors.white, |
|
|
|
|
|
borderRadius: BorderRadius.circular(12), |
|
|
|
|
|
boxShadow: const [ |
|
|
|
|
|
BoxShadow( |
|
|
|
|
|
color: Color(0x14000000), |
|
|
|
|
|
blurRadius: 8, |
|
|
|
|
|
offset: Offset(0, 4), |
|
|
|
|
|
), |
|
|
|
|
|
], |
|
|
|
|
|
), |
|
|
|
|
|
padding: const EdgeInsets.all(12), |
|
|
|
|
|
child: Column( |
|
|
|
|
|
crossAxisAlignment: CrossAxisAlignment.start, |
|
|
|
|
|
children: [ |
|
|
|
|
|
const _CardHeader(liveOverlayOnAvatar: true), |
|
|
|
|
|
const SizedBox(height: 8), |
|
|
|
|
|
const Text( |
|
|
|
|
|
'正在直播，快来互动～', |
|
|
|
|
|
style: TextStyle(fontSize: 13, color: Color(0xFF666666)), |
|
|
|
|
|
), |
|
|
|
|
|
const SizedBox(height: 10), |
|
|
|
|
|
Align( |
|
|
|
|
|
alignment: Alignment.centerLeft, |
|
|
|
|
|
child: Container( |
|
|
|
|
|
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 8), |
|
|
|
|
|
decoration: BoxDecoration( |
|
|
|
|
|
gradient: const LinearGradient( |
|
|
|
|
|
colors: [Color(0xFF2D7CFF), Color(0xFF7A5CFF)], |
|
|
|
|
|
), |
|
|
|
|
|
borderRadius: BorderRadius.circular(18), |
|
|
|
|
|
), |
|
|
|
|
|
child: const Text( |
|
|
|
|
|
'进入直播间', |
|
|
|
|
|
style: TextStyle(color: Colors.white, fontSize: 14, fontWeight: FontWeight.w600), |
|
|
|
|
|
), |
|
|
|
|
|
), |
|
|
|
|
|
), |
|
|
|
|
|
], |
|
|
|
|
|
), |
|
|
|
|
|
); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 占位组件已被带描边版本替代，保留空实现会触发未使用告警，故移除 |
|
|
|
|
|
|
|
|
|
|
|
// 带蓝色描边的图片占位 |
|
|
|
|
|
class _BorderedImage extends StatelessWidget { |
|
|
|
|
|
const _BorderedImage(); |
|
|
|
|
|
|
|
|
|
|
|
@override |
|
|
|
|
|
Widget build(BuildContext context) { |
|
|
|
|
|
return Expanded( |
|
|
|
|
|
child: AspectRatio( |
|
|
|
|
|
aspectRatio: 1.05, |
|
|
|
|
|
child: Container( |
|
|
|
|
|
decoration: BoxDecoration( |
|
|
|
|
|
borderRadius: BorderRadius.circular(14), |
|
|
|
|
|
border: Border.all(color: const Color(0xFF5D7BFF), width: 2), |
|
|
|
|
|
), |
|
|
|
|
|
clipBehavior: Clip.antiAlias, |
|
|
|
|
|
child: Image.asset( |
|
|
|
|
|
Assets.imagesDiscoverPre, |
|
|
|
|
|
fit: BoxFit.cover, |
|
|
|
|
|
), |
|
|
|
|
|
), |
|
|
|
|
|
), |
|
|
|
|
|
); |
|
|
|
|
|
} |
|
|
|
|
|
} |
Jolie
4 months ago
