Flutter实现滑动页面停留吸附

如图，实现这种，   

• 滑动吸附效果的应用场景（如电商分类导航、Tab栏联动）

import 'package:flutter/material.dart';void main() => runApp(const MyApp());class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return const MaterialApp(home: MapWithListPage(),);}
}class MapWithListPage extends StatelessWidget {const MapWithListPage({super.key});@overrideWidget build(BuildContext context) {return Scaffold(body: Stack(children: [// 底层地图Container(color: Colors.blue[200], // 占位，可以替换成地图child: const Center(child: Text("地图在这里")),),// 上层可拖动的列表DraggableScrollableSheet(initialChildSize: 0.3, // 初始高度 = 30%minChildSize: 0.3,     // 最小高度 = 30%maxChildSize: 0.9,     // 最大高度 = 100%snap: true,            // 开启吸附snapSizes: const [0.3, 0.6, 0.9], // 三个停靠点builder: (context, scrollController) {return Container(decoration: const BoxDecoration(color: Colors.white,borderRadius: BorderRadius.vertical(top: Radius.circular(16)),boxShadow: [BoxShadow(blurRadius: 10, color: Colors.black26)],),child: ListView.builder(controller: scrollController,itemCount: 30,itemBuilder: (context, index) {return ListTile(title: Text("列表项 $index"));},),);},),],),);}
}