327 lines
10 KiB
Dart
327 lines
10 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
|
|
import 'activity_detail_screen.dart';
|
|
|
|
class ActivityListScreen extends StatefulWidget {
|
|
@override
|
|
_ActivityListScreenState createState() => _ActivityListScreenState();
|
|
}
|
|
|
|
class _ActivityListScreenState extends State<ActivityListScreen> {
|
|
String? _selectedTime;
|
|
|
|
// 模拟活动数据
|
|
final List<Map<String, dynamic>> activities = [
|
|
{
|
|
'title': '周末公园太极拳',
|
|
'date': '今天 07:30',
|
|
'location': '人民公园',
|
|
'participants': 12,
|
|
'image': 'https://picsum.photos/seed/1/400/300',
|
|
'creator': '王阿姨',
|
|
'avatarSeed': 11,
|
|
},
|
|
{
|
|
'title': '社区书法班开课啦',
|
|
'date': '明天 09:00',
|
|
'location': '社区活动中心',
|
|
'participants': 8,
|
|
'image': 'https://picsum.photos/seed/2/400/500',
|
|
'creator': '李老师',
|
|
'avatarSeed': 22,
|
|
},
|
|
{
|
|
'title': '广场舞队招新',
|
|
'date': '本周三 19:00',
|
|
'location': '中央广场',
|
|
'participants': 25,
|
|
'image': 'https://picsum.photos/seed/3/400/400',
|
|
'creator': '张姐',
|
|
'avatarSeed': 33,
|
|
},
|
|
{
|
|
'title': '老年摄影兴趣小组',
|
|
'date': '本周四 14:00',
|
|
'location': '文化馆',
|
|
'participants': 15,
|
|
'image': 'https://picsum.photos/seed/4/400/350',
|
|
'creator': '陈叔',
|
|
'avatarSeed': 44,
|
|
},
|
|
{
|
|
'title': '周三棋牌活动',
|
|
'date': '本周五 16:00',
|
|
'location': '社区会所',
|
|
'participants': 20,
|
|
'image': 'https://picsum.photos/seed/5/400/450',
|
|
'creator': '赵大哥',
|
|
'avatarSeed': 55,
|
|
},
|
|
{
|
|
'title': '健康养生讲座',
|
|
'date': '${DateTime.now().month}月${DateTime.now().day}日 10:30',
|
|
'location': '图书馆',
|
|
'participants': 30,
|
|
'image': 'https://picsum.photos/seed/6/400/380',
|
|
'creator': '刘阿姨',
|
|
'avatarSeed': 66,
|
|
},
|
|
];
|
|
|
|
Future<void> _refreshActivities() async {
|
|
if (!mounted) return;
|
|
setState(() {
|
|
activities.shuffle();
|
|
});
|
|
await Future.delayed(const Duration(milliseconds: 200));
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Container(
|
|
color: const Color(0xFFFFF8F0),
|
|
child: Column(
|
|
children: [
|
|
AppBar(
|
|
title: Text('伴享', style: TextStyle(fontWeight: FontWeight.bold)),
|
|
centerTitle: true,
|
|
actions: [
|
|
IconButton(
|
|
icon: Icon(Icons.search),
|
|
onPressed: () {},
|
|
),
|
|
IconButton(
|
|
icon: Icon(Icons.notifications_none),
|
|
onPressed: () {},
|
|
),
|
|
],
|
|
),
|
|
Expanded(child: _buildFeed()),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildFeed() {
|
|
final filteredActivities = _getFilteredActivities();
|
|
return RefreshIndicator(
|
|
onRefresh: _refreshActivities,
|
|
child: ListView(
|
|
physics: const AlwaysScrollableScrollPhysics(),
|
|
padding: const EdgeInsets.all(12),
|
|
children: [
|
|
_buildTimeFilterChips(),
|
|
const SizedBox(height: 12),
|
|
MasonryGridView.count(
|
|
shrinkWrap: true,
|
|
physics: const NeverScrollableScrollPhysics(),
|
|
crossAxisCount: 2,
|
|
mainAxisSpacing: 10,
|
|
crossAxisSpacing: 10,
|
|
itemCount: filteredActivities.length,
|
|
itemBuilder: (context, index) {
|
|
return _buildActivityCard(filteredActivities[index], index);
|
|
},
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildTimeFilterChips() {
|
|
const timeOptions = ['今天', '明天', '本周'];
|
|
return SingleChildScrollView(
|
|
scrollDirection: Axis.horizontal,
|
|
child: Row(
|
|
children: timeOptions.map((time) {
|
|
final isSelected = _selectedTime == time;
|
|
return Padding(
|
|
padding: const EdgeInsets.only(right: 8),
|
|
child: ChoiceChip(
|
|
label: Text(time),
|
|
selected: isSelected,
|
|
onSelected: (_) {
|
|
setState(() {
|
|
_selectedTime = isSelected ? null : time;
|
|
});
|
|
},
|
|
selectedColor: const Color(0xFFFF6B35),
|
|
labelStyle: TextStyle(
|
|
color: isSelected ? Colors.white : const Color(0xFF666666),
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
backgroundColor: const Color(0xFFFFEFE3),
|
|
),
|
|
);
|
|
}).toList(),
|
|
),
|
|
);
|
|
}
|
|
|
|
List<Map<String, dynamic>> _getFilteredActivities() {
|
|
if (_selectedTime == null || _selectedTime == '本周') {
|
|
return activities;
|
|
}
|
|
|
|
final todayLabel = '${DateTime.now().month}月${DateTime.now().day}日';
|
|
return activities.where((activity) {
|
|
final dateText = (activity['date'] ?? '').toString();
|
|
if (_selectedTime == '今天') {
|
|
return dateText.contains('今天') || dateText.contains(todayLabel);
|
|
}
|
|
if (_selectedTime == '明天') {
|
|
return dateText.contains('明天');
|
|
}
|
|
return true;
|
|
}).toList();
|
|
}
|
|
|
|
Widget _buildActivityCard(Map<String, dynamic> activity, int index) {
|
|
final imageHeight = index.isOdd ? 160.0 : 210.0;
|
|
final coverUrl =
|
|
'https://picsum.photos/seed/${activity['title'].hashCode.abs()}/400/300';
|
|
|
|
return GestureDetector(
|
|
onTap: () {
|
|
// 跳转到详情页
|
|
Navigator.push(
|
|
context,
|
|
MaterialPageRoute(
|
|
builder: (context) => ActivityDetailScreen(activity: activity),
|
|
),
|
|
);
|
|
},
|
|
child: Container(
|
|
decoration: BoxDecoration(
|
|
color: Colors.white,
|
|
borderRadius: BorderRadius.circular(12),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: Colors.black.withOpacity(0.06),
|
|
blurRadius: 6,
|
|
offset: Offset(0, 2),
|
|
),
|
|
],
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
// 封面图片
|
|
ClipRRect(
|
|
borderRadius: BorderRadius.vertical(top: Radius.circular(12)),
|
|
child: SizedBox(
|
|
height: imageHeight,
|
|
width: double.infinity,
|
|
child: Image.network(
|
|
coverUrl,
|
|
fit: BoxFit.cover,
|
|
errorBuilder: (context, error, stackTrace) {
|
|
return Container(
|
|
color: Colors.grey[200],
|
|
alignment: Alignment.center,
|
|
child: Icon(
|
|
Icons.image_outlined,
|
|
size: 40,
|
|
color: Colors.grey[400],
|
|
),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
),
|
|
// 标题和信息
|
|
Padding(
|
|
padding: EdgeInsets.all(8),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
activity['title'],
|
|
style: TextStyle(
|
|
fontSize: 14,
|
|
fontWeight: FontWeight.bold,
|
|
color: Color(0xFF333333),
|
|
),
|
|
maxLines: 2,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
SizedBox(height: 4),
|
|
Row(
|
|
children: [
|
|
SizedBox(
|
|
width: 32,
|
|
height: 32,
|
|
child: ClipOval(
|
|
child: Image.network(
|
|
'https://i.pravatar.cc/40?img=${activity['avatarSeed']}',
|
|
fit: BoxFit.cover,
|
|
errorBuilder: (context, error, stackTrace) {
|
|
return Container(
|
|
color: Colors.grey[200],
|
|
alignment: Alignment.center,
|
|
child: Icon(
|
|
Icons.person,
|
|
size: 16,
|
|
color: Colors.grey[500],
|
|
),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
),
|
|
SizedBox(width: 8),
|
|
Expanded(
|
|
flex: 3,
|
|
child: Text(
|
|
activity['creator'],
|
|
style: TextStyle(
|
|
fontSize: 12,
|
|
color: Color(0xFF999999),
|
|
),
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
),
|
|
Spacer(flex: 1),
|
|
Text(
|
|
'${activity['participants']}人',
|
|
style: TextStyle(
|
|
fontSize: 12,
|
|
color: Color(0xFFFF6B35),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
SizedBox(height: 6),
|
|
Row(
|
|
children: [
|
|
Icon(
|
|
Icons.access_time,
|
|
size: 13,
|
|
color: Color(0xFF999999),
|
|
),
|
|
SizedBox(width: 4),
|
|
Expanded(
|
|
child: Text(
|
|
activity['date'] ?? '',
|
|
style: TextStyle(
|
|
fontSize: 12,
|
|
color: Color(0xFF999999),
|
|
),
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
}
|