// lib/widgets/complex_list_item.dart
import 'package:flutter/material.dart';

class ComplexListItem extends StatelessWidget {
  final String title;
  final String subtitle;
  final String imageUrl;
  final int index;

  const ComplexListItem({
    super.key,
    required this.title,
    required this.subtitle,
    required this.imageUrl,
    required this.index,
  });

  @override
  Widget build(BuildContext context) {
    // 模拟一些复杂的计算或布局
    // print('Building ComplexListItem $index'); // 用于观察重建次数
    return Card(
      elevation: 4,
      margin: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            ClipRRect(
              borderRadius: BorderRadius.circular(8.0),
              child: Image.network(
                imageUrl,
                width: 80,
                height: 80,
                fit: BoxFit.cover,
                loadingBuilder: (context, child, loadingProgress) {
                  if (loadingProgress == null) return child;
                  return Center(
                    child: CircularProgressIndicator(
                      value: loadingProgress.expectedTotalBytes != null
                          ? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes!
                          : null,
                    ),
                  );
                },
                errorBuilder: (context, error, stackTrace) {
                  return const Icon(Icons.broken_image, size: 80, color: Colors.grey);
                },
              ),
            ),
            const SizedBox(width: 16),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    title,
                    style: const TextStyle(
                      fontSize: 18,
                      fontWeight: FontWeight.bold,
                    ),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                  const SizedBox(height: 4),
                  Text(
                    subtitle,
                    style: TextStyle(fontSize: 14, color: Colors.grey[600]),
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                  ),
                  const SizedBox(height: 8),
                  Row(
                    children: [
                      const Icon(Icons.star, color: Colors.amber, size: 16),
                      const Text(' 4.5'),
                      const Spacer(),
                      ElevatedButton(
                        onPressed: () {
                          // 模拟点击事件
                          ScaffoldMessenger.of(context).showSnackBar(
                            SnackBar(content: Text('Clicked on item $index: $title')),
                          );
                        },
                        child: const Text('详情'),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';
import 'package:flutter_app/widgets/complex_list_item.dart'; // 替换为你的实际路径

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '性能优化示例',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const PerformanceOptimizedListScreen(),
    );
  }
}

class PerformanceOptimizedListScreen extends StatefulWidget {
  const PerformanceOptimizedListScreen({super.key});

  @override
  State<PerformanceOptimizedListScreen> createState() => _PerformanceOptimizedListScreenState();
}

class _PerformanceOptimizedListScreenState extends State<PerformanceOptimizedListScreen> {
  final List<Map<String, dynamic>> _data = List.generate(
    1000, // 模拟大量数据
    (index) => {
      'id': index,
      'title': '商品标题 ${index + 1}',
      'subtitle': '这是商品 ${index + 1} 的详细描述，包含一些重要的信息。',
      'imageUrl': 'https://picsum.photos/id/${100 + index}/200/200', // 随机图片
    },
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('性能优化列表'),
      ),
      body: ListView.builder(
        itemCount: _data.length,
        itemBuilder: (context, index) {
          final item = _data[index];
          // 使用 const 关键字，如果 ComplexListItem 的所有属性都是 final 且不变
          // 并且其内部没有非 const 的 Widget 或状态
          return ComplexListItem(
            key: ValueKey(item['id']), // 为列表项提供唯一的 Key
            title: item['title'],
            subtitle: item['subtitle'],
            imageUrl: item['imageUrl'],
            index: item['id'],
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 模拟更新操作，观察性能
          setState(() {
            // 假设我们只是更新了列表中的某个不影响其他项的属性
            // 例如，改变第一个商品的标题，但不会导致所有项重建
            _data[0]['title'] = '更新后的商品标题';
          });
        },
        child: const Icon(Icons.refresh),
      ),
    );
  }
}