Flutter实现滑动页面停留吸附

GeniuswongAir2025-09-25 20:24
如图，实现这种，
滑动吸附效果的应用场景（如电商分类导航、Tab栏联动）
Dart 复制代码
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MapWithListPage(),
    );
  }
}

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

  @override
  Widget 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"));
                  },
                ),
              );
            },
          ),
        ],
      ),
    );
  }
}