Flutter：实现可拖拽且带动画的BottomSheet功能问询

以下是主流平台的具体实现方式，根据你的技术栈选择即可：

Android 平台 #

1. Jetpack Compose 实现 #

使用官方提供的ModalBottomSheet组件，配合状态控制显示/隐藏：

@Composable
fun BottomSheetDemo() {
    val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
    val scope = rememberCoroutineScope()
    var showSheet by remember { mutableStateOf(false) }

    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Button(onClick = { showSheet = true }) {
            Text("显示BottomSheet")
        }
    }

    if (showSheet) {
        ModalBottomSheet(
            onDismissRequest = { showSheet = false },
            sheetState = sheetState
        ) {
            // BottomSheet内容区域
            Column(modifier = Modifier.padding(16.dp)) {
                Text("更多信息展示", fontSize = 18.sp, fontWeight = FontWeight.Bold)
                Spacer(modifier = Modifier.height(16.dp))
                Text("这里可以放置需要展示的详细内容，支持滚动布局")
                // 可添加更多组件
            }
        }
    }
}

2. 传统 View 系统实现 #

通过BottomSheetDialogFragment实现：

第一步：创建BottomSheetDialogFragment子类

public class InfoBottomSheet extends BottomSheetDialogFragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.bottom_sheet_info, container, false);
    }
}

第二步：在Activity/Fragment中触发显示

Button showBtn = findViewById(R.id.show_bottom_sheet_btn);
showBtn.setOnClickListener(v -> {
    new InfoBottomSheet().show(getSupportFragmentManager(), "InfoBottomSheet");
});

对应的布局文件bottom_sheet_info.xml可自行定义内容布局。

iOS 平台 #

1. SwiftUI 实现 #

使用sheet修饰符快速实现：

struct BottomSheetDemoView: View {
    @State private var isSheetPresented = false
    
    var body: some View {
        Button("显示BottomSheet") {
            isSheetPresented = true
        }
        .sheet(isPresented: $isSheetPresented) {
            // BottomSheet内容
            VStack(spacing: 16) {
                Text("更多信息展示")
                    .font(.title)
                    .fontWeight(.bold)
                Text("这里可以放置详细内容，支持滚动视图")
                // 添加更多内容组件
            }
            .padding()
            .presentationDetents([.medium, .large]) // 设置可展开的高度
        }
    }
}

2. UIKit 实现 #

利用UISheetPresentationController实现自定义BottomSheet：

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let showBtn = UIButton(type: .system)
        showBtn.setTitle("显示BottomSheet", for: .normal)
        showBtn.addTarget(self, action: #selector(showBottomSheet), for: .touchUpInside)
        showBtn.frame = CGRect(x: 100, y: 200, width: 200, height: 50)
        view.addSubview(showBtn)
    }
    
    @objc func showBottomSheet() {
        let sheetVC = UIViewController()
        sheetVC.view.backgroundColor = .white
        // 设置内容视图
        let label = UILabel(frame: CGRect(x: 20, y: 40, width: sheetVC.view.frame.width - 40, height: 200))
        label.text = "更多信息展示\n这里可以放置详细内容"
        label.numberOfLines = 0
        sheetVC.view.addSubview(label)
        
        // 配置Sheet样式
        if let sheet = sheetVC.sheetPresentationController {
            sheet.detents = [.medium(), .large()]
            sheet.prefersGrabberVisible = true // 显示顶部拖拽条
        }
        
        present(sheetVC, animated: true)
    }
}

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