杂货 - 需要重叠卡，应扩展

Question

这里试图像生成卡片一样归档设计，并应顶重叠每张卡

• 选定的卡应扩展，剩余的卡应降低

我在代码下方尝试将卡一成一重叠

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

  @override
  State<MerchantCards> createState() => _MerchantCardsState();
}

class _MerchantCardsState extends State<MerchantCards> {
  int? _selectedCardIndex;

  void _onCardTap(int index) {
    setState(() {
      _selectedCardIndex = index; // Toggle selection
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Overlapping Animated Cards'),
      ),
      body: ListView.builder(
        itemCount: 3, // Number of cards
        itemBuilder: (context, index) {
          return Align(
              heightFactor: _selectedCardIndex == index ? 2 : 0.3,
              child: GestureDetector(
                  onTap: () => _onCardTap(index),
                  child: SizedBox(
                    height: 200,
                    width: 300,
                    child: Card(
                      color: Color((math.Random().nextDouble() * 0xFFFFFF).toInt())
                              .withOpacity(1.0),
                      child: Center(
                        child: Text("Card ${index + 1}"),
                      ),
                    ),
                  )));
        },
      ),
    );
  }
}

我想期望该卡可以通过动画扩展，我已经附加了Refrense

卡重叠的图像

反式模式

卡扩展的图像

扩展模式

在这里是像动画扩展的功能

指望功能

Answer 1

class AccordionList extends StatefulWidget {
  AccordionList({
    super.key,
    required this.state,
  });
  MerchantState state;
  @override
  _AccordionListState createState() => _AccordionListState();
}
class _AccordionListState extends State<AccordionList> {
  int? expandedIndex;
  bool isNavigating = false;
  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Stack(
        children:
            List.generate(widget.state.merchantCards?.length ?? 0, (index) {
          double topPosition = expandedIndex == null
              ? index * 30.0 // Default overlap effect
              : index <= expandedIndex!
                  ? index * 30.0 // Keep the same
                  : expandedIndex! * 30.0 +
                      200 +
                      (index - expandedIndex! - 1) * 30.0;
          return AnimatedPositioned(
            duration: Duration(milliseconds: 500),
            curve: Curves.easeInOut,
            left: 20,
            right: 20,
            top: topPosition,
            child: GestureDetector(
              onTap: () {
                if (expandedIndex == index) {
                  // Redirect to another screen
                  if (!isNavigating) {
                    isNavigating = true;
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (_) => DetailScreen(),
                      ),
                    ).then((_) {
                      setState(() => isNavigating = false);
                    });
                  }
                } else {
                  // Expand the selected image
                  setState(() => expandedIndex = index);
                }
              },
              child: AnimatedContainer(
                duration: Duration(milliseconds: 500),
                curve: Curves.easeInOut,
                height: expandedIndex == index ? 200 : 50,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(15),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black26,
                      blurRadius: 10,
                      spreadRadius: 1,
                      offset: Offset(0, 3),
                    ),
                  ],
                ),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(15),
                  child: Image.network(
                    widget.state.merchantCards?[index].frontCardDesign ?? '',
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            ),
          );
        }),
      ),
    );
  }
}

Here细节屏幕

class DetailScreen extends StatelessWidget {
  DetailScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Detail Screen")),
      body: Center(
        child: Text("data"),
      ),
    );
  }
}