Flutter中如何将ExpansionTile的尾部下拉箭头置于标题图片之上

Absolutely, you can make the expansion arrow sit on top of your CurrentNoti component's image. The default ExpansionTile places the title and trailing arrow side-by-side in a row, so we'll need to combine them into a single stacked layout instead. Here's a clean way to implement this:

Step-by-Step Implementation #

1. Track the expansion state: We need to know if the tile is expanded or collapsed to animate the arrow correctly.
2. Use a Stack for overlapping layout: Wrap your CurrentNoti component and the custom arrow in a Stack, so they share the same space.
3. Hide the default trailing arrow: Set the ExpansionTile's trailing property to null to avoid duplicate arrows.

Full Code Example #

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

  @override
  State<YourParentWidget> createState() => _YourParentWidgetState();
}

class _YourParentWidgetState extends State<YourParentWidget> {
  bool _isTileExpanded = false;

  @override
  Widget build(BuildContext context) {
    return ExpansionTile(
      // Listen for expansion state changes to update our arrow
      onExpansionChanged: (isExpanded) {
        setState(() {
          _isTileExpanded = isExpanded;
        });
      },
      // Disable the default trailing arrow
      trailing: null,
      // Use Stack to overlay CurrentNoti and the expansion arrow
      title: Stack(
        // Adjust alignment to place the arrow where you want it on the image
        // Try Alignment.bottomRight or Alignment.centerRight if needed
        alignment: Alignment.topRight,
        children: [
          // Your original CurrentNoti component
          CurrentNoti(
            date: DateFormat.yMMMMd().format(
              DateTime.fromMicrosecondsSinceEpoch(
                docs?[index]['date'].microsecondsSinceEpoch,
              ),
            ),
            location: docs?[index]['location'],
          ),
          // Animated arrow matching the default ExpansionTile's behavior
          Padding(
            // Add padding to keep the arrow from touching the edge of the image
            padding: const EdgeInsets.all(8.0),
            child: AnimatedRotation(
              turns: _isTileExpanded ? 0.5 : 0, // Rotate 180 degrees when expanded
              duration: const Duration(milliseconds: 200),
              child: const Icon(Icons.expand_more),
            ),
          ),
        ],
      ),
      children: const [
        Text("Some description here"),
      ],
    );
  }
}

Key Details #

• Stack Alignment: The alignment parameter controls where the arrow sits relative to the image. Alignment.topRight places it in the top-right corner, but you can tweak this to match your UI design.
• Animation: The AnimatedRotation widget replicates the smooth spin effect of the default ExpansionTile arrow. The turns: 0.5 value means a 180-degree rotation when the tile is expanded.
• Padding: Adding Padding around the arrow ensures it doesn't get cut off or look cramped against the image edges.

This approach keeps all the original functionality of the ExpansionTile while letting you overlay the arrow exactly where you want it on your CurrentNoti image.

内容的提问来源于stack exchange，提问作者Mohsin