Flutter如何实现BottomSheet内Column中ListView独立滚动不影响上层固定组件

你需要对代码做两处调整即可实现顶部固定、仅列表区域滚动的效果：

• 给ListView.separated外层套上Expanded组件，让列表自动占满Column内除顶部固定容器外的所有剩余空间，获得明确的滚动边界
• 移除ListView的shrinkWrap: true配置，该参数仅用于列表嵌套在其他滚动组件内的场景，当前场景开启反而会带来不必要的性能损耗

修改后的完整代码如下：

import 'package:flutter/material.dart';
import 'package:get/get.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () => Get.bottomSheet(
            GetXBottomSheet(),
            backgroundColor: Colors.white,
            isScrollControlled: true,
          ),
        ),
      ),
    );
  }
}

class GetXBottomSheet extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      constraints: BoxConstraints(maxHeight: Get.height * 0.7),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            child: Text('Text No Scroll', textAlign: TextAlign.center),
            color: Colors.grey,
            width: double.infinity,
            padding: EdgeInsets.symmetric(vertical: 16),
          ),
          Expanded(
            child: ListView.separated(
              separatorBuilder: (__, _) => Divider(height: 0),
              itemCount: 100,
              physics: AlwaysScrollableScrollPhysics(),
              itemBuilder: (BuildContext context, int index) {
                return Padding(
                  padding: EdgeInsets.symmetric(vertical: 12, horizontal: 16),
                  child: Text('$index'),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

修改后运行即可达到预期效果，顶部文本容器固定，仅下方列表区域支持独立滚动。

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