feat: v1.1.7+9 - home_screen double-column waterfall layout

lib/screens/home_screen.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import "package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart";
 import '../models/activity.dart';
 import '../services/activity_service.dart';
 import '../utils/constants.dart';
@@ -127,16 +128,29 @@ class _HomeScreenState extends State<HomeScreen> {
                     ),
                   ),
                   // Activity list
-                  SliverList(
+                  SliverToBoxAdapter(
-                    delegate: SliverChildBuilderDelegate(
+                    child: MasonryGridView.count(
-                      (ctx, i) => _ActivityCard(
+                      crossAxisCount: 2,
-                        key: ValueKey(_filteredActivities[i].id),
+                      mainAxisSpacing: 10,
-                        activity: _filteredActivities[i],
+                      crossAxisSpacing: 10,
-                        onTap: () => Navigator.push(context, MaterialPageRoute(
+                      padding: const EdgeInsets.all(12),
-                          builder: (_) => ActivityDetailScreen(activity: _filteredActivities[i]),
+                      shrinkWrap: true,
-                        )),
+                      physics: const NeverScrollableScrollPhysics(),
-                      ),
+                      itemCount: _filteredActivities.length,
-                      childCount: _filteredActivities.length,
+                      itemBuilder: (ctx, index) {
+                        final activity = _filteredActivities[index];
+                        return _ActivityCard(
+                          key: ValueKey(activity.id),
+                          activity: activity,
+                          imageHeight: index.isOdd ? 160.0 : 210.0,
+                          onTap: () => Navigator.push(
+                            context,
+                            MaterialPageRoute(
+                              builder: (_) => ActivityDetailScreen(activity: activity),
+                            ),
+                          ),
+                        );
+                      },
                     ),
                   ),
                   const SliverToBoxAdapter(child: SizedBox(height: 80)),
@@ -156,92 +170,103 @@ class _HomeScreenState extends State<HomeScreen> {
 
 class _ActivityCard extends StatefulWidget {
   final Activity activity;
+  final double imageHeight;
   final VoidCallback onTap;
-  const _ActivityCard({super.key, required this.activity, required this.onTap});
+  const _ActivityCard({
+    super.key,
+    required this.activity,
+    required this.imageHeight,
+    required this.onTap,
+  });
 
   @override
   State<_ActivityCard> createState() => _ActivityCardState();
 }
 
 class _ActivityCardState extends State<_ActivityCard> {
-  bool _isJoined = false;
-
-  String _categoryEmoji(String cat) {
-    const map = {'太极':'🧘','茶话会':'🍵','书法':'✍️','摄影':'📷','舞蹈':'💃','户外徒步':'🥾','手工':'🎨','唱歌':'🎵','棋牌':'♟️','读书':'📚','晨练':'🏃'};
-    return map[cat] ?? '🎯';
-  }
-
-  void _joinActivity() {
-    setState(() {
-      _isJoined = true;
-    });
-    ScaffoldMessenger.of(context).showSnackBar(
-      const SnackBar(content: Text('报名成功！')),
-    );
-  }
-
   @override
   Widget build(BuildContext context) {
     final activity = widget.activity;
-    final canJoin = !activity.isFull && !_isJoined;
+    return Material(
-    final buttonText = _isJoined
+      color: Colors.transparent,
-        ? '已报名'
-        : (activity.isFull ? '已满员' : '报名');
-
-    return Card(
-      margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 6),
       child: InkWell(
         onTap: widget.onTap,
-        borderRadius: BorderRadius.circular(16),
+        borderRadius: BorderRadius.circular(12),
-        child: Padding(
+        child: Container(
-          padding: const EdgeInsets.all(16),
+          decoration: BoxDecoration(
+            color: Colors.white,
+            borderRadius: BorderRadius.circular(12),
+            boxShadow: [
+              BoxShadow(
+                color: Colors.black.withOpacity(0.06),
+                blurRadius: 6,
+                offset: const Offset(0, 2),
+              ),
+            ],
+          ),
           child: Column(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
-              Row(
+              ClipRRect(
-                children: [
+                borderRadius: const BorderRadius.only(
-                  Text(_categoryEmoji(activity.category), style: const TextStyle(fontSize: 24)),
+                  topLeft: Radius.circular(12),
-                  const SizedBox(width: 8),
+                  topRight: Radius.circular(12),
-                  Expanded(child: Text(activity.title, style: const TextStyle(fontSize: 18, fontWeight: FontWeight.w600), maxLines: 1, overflow: TextOverflow.ellipsis)),
+                ),
-                ],
+                child: Image.network(
+                  "https://picsum.photos/seed/${activity.title.hashCode.abs()}/400/300",
+                  height: widget.imageHeight,
+                  width: double.infinity,
+                  fit: BoxFit.cover,
+                  errorBuilder: (_, __, ___) => Container(
+                    height: widget.imageHeight,
+                    color: const Color(0xFFE0E0E0),
+                  ),
+                ),
               ),
-              const SizedBox(height: 12),
+              Padding(
-              Row(
+                padding: const EdgeInsets.all(8),
-                children: [
+                child: Column(
-                  const Icon(Icons.access_time, size: 16, color: Color(0xFF999999)),
+                  crossAxisAlignment: CrossAxisAlignment.start,
-                  const SizedBox(width: 4),
+                  children: [
-                  Text(activity.timeDisplay, style: const TextStyle(fontSize: 16, color: Color(0xFF666666))),
+                    Text(
-                  const SizedBox(width: 16),
+                      activity.title,
-                  const Icon(Icons.location_on_outlined, size: 16, color: Color(0xFF999999)),
+                      maxLines: 2,
-                  const SizedBox(width: 4),
+                      overflow: TextOverflow.ellipsis,
-                  Text(activity.distance != null ? '距你${activity.distance}km' : '', style: const TextStyle(fontSize: 16, color: Color(0xFF666666))),
+                      style: const TextStyle(
-                ],
+                        fontSize: 14,
-              ),
+                        fontWeight: FontWeight.w700,
-              const SizedBox(height: 12),
+                        color: Color(0xFF333333),
-              Row(
-                children: [
-                  Expanded(
-                    child: Text(
-                      '已报名 ${activity.currentParticipants}/${activity.maxParticipants}人',
-                      style: TextStyle(
-                        fontSize: 16,
-                        color: activity.isFull ? const Color(0xFFF44336) : const Color(0xFF4CAF50),
-                        fontWeight: FontWeight.w500,
                       ),
                     ),
-                  ),
+                    const SizedBox(height: 4),
-                  SizedBox(
+                    Row(
-                    height: 40,
+                      children: [
-                    child: ElevatedButton(
+                        CircleAvatar(
-                      onPressed: canJoin ? _joinActivity : null,
+                          radius: 10,
-                      style: ElevatedButton.styleFrom(
+                          backgroundImage: NetworkImage(
-                        minimumSize: const Size(80, 40),
+                            "https://i.pravatar.cc/40?img=${activity.category.hashCode.abs() % 40 + 1}",
-                        padding: const EdgeInsets.symmetric(horizontal: 20),
+                          ),
-                      ),
+                        ),
-                      child: Text(buttonText, style: const TextStyle(fontSize: 16)),
+                        const SizedBox(width: 4),
+                        Text(
+                          activity.category,
+                          style: const TextStyle(
+                            fontSize: 12,
+                            color: Color(0xFF999999),
+                          ),
+                        ),
+                        const Spacer(),
+                        Text(
+                          "${activity.currentParticipants}人",
+                          style: const TextStyle(
+                            fontSize: 12,
+                            color: Color(0xFFFF6B35),
+                          ),
+                        ),
+                      ],
                     ),
-                  ),
+                  ],
-                ],
+                ),
               ),
             ],
           ),

pubspec.yaml

@@ -1,6 +1,6 @@
 name: banxiang_app
 description: 伴享
-version: 1.1.6+8
+version: 1.1.7+9
 
 environment:
   sdk: '>=3.0.0 <4.0.0'