Flutter实现容器在三个垂直位置间切换的问题求助

一、修复AnimatedPositioned的实现逻辑 #

你的问题出在直接在onVerticalDragUpdate中切换位置——这个回调会在拖动过程中频繁触发，导致状态被反复修改，无法稳定停在初始位置。正确的做法是：

1. 定义明确的三个位置常量，用枚举管理当前状态
2. 在拖动过程中记录偏移，在拖动结束时根据方向和距离判断目标位置

改进后的代码示例： #

import 'package:flutter/material.dart';

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

  @override
  State<CardBeforeRent> createState() => _CardBeforeRentState();
}

// 定义三个位置枚举
enum CardPosition {
  top,    // 顶部位置
  middle, // 初始位置
  bottom, // 底部位置
}

class _CardBeforeRentState extends State<CardBeforeRent> {
  // 映射每个位置对应的bottom值
  final Map<CardPosition, double> _positionBottomValues = {
    CardPosition.top: 140,
    CardPosition.middle: 0,
    CardPosition.bottom: -265,
  };

  CardPosition _currentPosition = CardPosition.middle;
  double _tempBottom = 0; // 拖动过程中的临时位置

  @override
  Widget build(BuildContext context) {
    return AnimatedPositioned(
      width: MediaQuery.of(context).size.width,
      duration: const Duration(milliseconds: 300),
      curve: Curves.easeInOut,
      bottom: _tempBottom,
      child: GestureDetector(
        // 开始拖动时记录当前基准位置
        onVerticalDragStart: (details) {
          _tempBottom = _positionBottomValues[_currentPosition]!;
        },
        // 拖动过程中实时更新临时位置
        onVerticalDragUpdate: (details) {
          setState(() {
            _tempBottom += details.delta.dy;
          });
        },
        // 拖动结束时判断目标位置
        onVerticalDragEnd: (details) {
          setState(() {
            // 根据拖动方向和速度判断要切换的位置
            if (details.primaryVelocity! > 200) {
              // 向上快速拖动，切换到顶部
              _currentPosition = CardPosition.top;
            } else if (details.primaryVelocity! < -200) {
              // 向下快速拖动，切换到底部
              _currentPosition = CardPosition.bottom;
            } else {
              // 慢速拖动，根据偏移距离判断
              final offsetFromMiddle = _tempBottom - _positionBottomValues[CardPosition.middle]!;
              if (offsetFromMiddle > 70) {
                _currentPosition = CardPosition.top;
              } else if (offsetFromMiddle < -130) {
                _currentPosition = CardPosition.bottom;
              } else {
                _currentPosition = CardPosition.middle;
              }
            }
            // 重置到目标位置
            _tempBottom = _positionBottomValues[_currentPosition]!;
          });
        },
        child: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            SizedBox(
              height: 360,
              child: Container(
                padding: const EdgeInsets.symmetric(horizontal: 10),
                decoration: BoxDecoration(
                  color: Theme.of(context).dialogBackgroundColor,
                  borderRadius: const BorderRadius.only(
                    topLeft: Radius.circular(15),
                    topRight: Radius.circular(15),
                  ),
                ),
                child: const Column(
                  children: [
                    // 你的卡片内容
                    Text("滑板车卡片内容"),
                  ],
                ),
              ),
            ),
            Container(
              decoration: BoxDecoration(color: Theme.of(context).bottomAppBarColor),
              height: 100,
              child: const Center(child: Text("预订按钮")),
            ),
          ],
        ),
      ),
    );
  }
}

二、更优雅的替代方案：DraggableScrollableSheet #

Flutter官方提供的DraggableScrollableSheet专门用于实现可拖动的底部面板，支持多停靠位置，无需手动处理拖动逻辑，代码更简洁：

示例代码： #

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // 页面背景内容
          const Center(child: Text("地图/背景内容")),
          // 可拖动的底部卡片
          DraggableScrollableSheet(
            initialChildSize: 0.35, // 初始位置（占屏幕高度比例）
            minChildSize: 0.1,      // 底部位置（最小占比）
            maxChildSize: 0.55,      // 顶部位置（最大占比）
            builder: (context, scrollController) {
              return Container(
                decoration: const BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(15),
                    topRight: Radius.circular(15),
                  ),
                ),
                child: Column(
                  children: [
                    // 顶部拖动指示器
                    const Padding(
                      padding: EdgeInsets.all(8.0),
                      child: Container(
                        width: 40,
                        height: 4,
                        color: Colors.grey,
                      ),
                    ),
                    // 卡片内容区域（可滚动）
                    Expanded(
                      child: ListView(
                        controller: scrollController,
                        children: const [
                          Padding(
                            padding: EdgeInsets.all(16.0),
                            child: Text("滑板车信息"),
                          ),
                          // 更多内容...
                        ],
                      ),
                    ),
                    // 底部按钮栏
                    Container(
                      height: 100,
                      color: Colors.grey[200],
                      child: const Center(child: Text("预订按钮")),
                    ),
                  ],
                ),
              );
            },
          ),
        ],
      ),
    );
  }
}

为什么推荐这个方案？ #

• 无需手动处理拖动、动画、位置判断逻辑，官方封装更稳定
• 支持滚动内容（如果卡片内容超过高度）
• 可以通过initialChildSize/minChildSize/maxChildSize精确控制三个停靠位置的占比，适配不同屏幕

内容的提问来源于stack exchange，提问作者Егор.Ка