如何在Flutter中实现滚动视图固定按钮并解决页面无法滚动问题

你遇到的滚动失效问题源于滚动控件嵌套冲突：你在可滚动的SingleChildScrollView内部嵌套了两个自带滚动能力的ListView.builder，即便给内部ListView设置了shrinkWrap: true，默认情况下它们依然会优先消费垂直滚动事件，导致滚动手势被内部列表拦截，外层SingleChildScrollView无法响应滚动。

给两个ListView.builder都添加physics: const NeverScrollableScrollPhysics()属性，禁用内部列表的滚动响应，所有滚动事件统一交给外层SingleChildScrollView处理即可。
修改后完整代码如下：

Column(
  children: [
    Expanded(
      child: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        child: Column(
          children: [
            ListView.builder(
              physics: const NeverScrollableScrollPhysics(), // 新增这行
              shrinkWrap: true,
              itemCount: 200,
              itemBuilder: (context, index) {
                return Text("200");
              },
            ),
            ListView.builder(
              physics: const NeverScrollableScrollPhysics(), // 新增这行
              shrinkWrap: true,
              itemCount: 20,
              itemBuilder: (context, index) {
                return Text("bargougui");
              },
            ),
          ],
        ),
      ),
    ),
    // 底部按钮部分代码无需改动
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(20.0),
            child: Container(
              width: 150,
              height: 50,
              child: ElevatedButton(
                style: ElevatedButton.styleFrom(
                  primary: Colors.grey[300],
                ),
                onPressed: () {},
                child: Text(
                  'Contacter',
                  style: TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.w500,
                    color: Colors.black,
                    fontStyle: FontStyle.italic,
                  ),
                ),
              ),
            ),
          ),
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(20.0),
            child: Container(
              width: 150,
              height: 50,
              child: ElevatedButton(
                style: ElevatedButton.styleFrom(
                  primary: Colors.yellow,
                ),
                onPressed: () {},
                child: Text(
                  'Acheter',
                  style: TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.w500,
                    color: Colors.black,
                    fontStyle: FontStyle.italic,
                  ),
                ),
              ),
            ),
          ),
        ),
      ],
    ),
  ],
)

你当前的结构嵌套了多层滚动控件，会增加不必要的布局开销。可以直接去掉外层SingleChildScrollView，把两个列表合并为一个ListView.builder，通过判断index范围渲染不同内容，代码更简洁性能也更好：

Column(
  children: [
    Expanded(
      child: ListView.builder(
        itemCount: 220, // 200+20的总元素数量
        itemBuilder: (context, index) {
          if (index < 200) {
            return Text("200");
          } else {
            return Text("bargougui");
          }
        },
      ),
    ),
    // 底部按钮代码保持不变即可
  ],
)

两种方案都可以实现「顶部可滚动内容+底部固定双按钮」的预期布局效果。

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