如何在Flutter中实现固定不滚动头部与含Slidable Tile的可滚动主体？

嘿，刚好我之前做过类似的需求，不用折腾Sliver那些组件，用基础布局就能完美实现你要的效果！核心思路就是固定头部放在顶部，下方用可滚动容器包裹Slidable Tile列表，具体实现步骤和代码如下：

整体布局逻辑 #

我们用Column作为根布局，分为上下两部分：

• 顶部是你的固定Header组件，直接放在Column里，不会跟随滚动
• 底部用Expanded包裹SingleChildScrollView，让滚动区域占满屏幕剩余空间，里面放硬编码的Slidable Tile列表

完整代码示例 #

首先确保你已经在pubspec.yaml里添加了flutter_slidable依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_slidable: ^3.0.0 # 用最新版本即可

然后是main.dart的完整代码：

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

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fixed Header + Slidable List',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          // 固定不滚动的Header
          const FixedHeader(),
          // 可滚动的主体区域
          Expanded(
            child: SingleChildScrollView(
              padding: const EdgeInsets.symmetric(vertical: 8),
              child: Column(
                children: [
                  // 硬编码的Slidable Tile列表
                  _buildSlidableTile('Item 1', Colors.red),
                  _buildSlidableTile('Item 2', Colors.green),
                  _buildSlidableTile('Item 3', Colors.blue),
                  _buildSlidableTile('Item 4', Colors.orange),
                  _buildSlidableTile('Item 5', Colors.purple),
                  _buildSlidableTile('Item 6', Colors.teal),
                  _buildSlidableTile('Item 7', Colors.pink),
                  _buildSlidableTile('Item 8', Colors.grey),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  // 封装Slidable Tile的构建方法
  Widget _buildSlidableTile(String title, Color color) {
    return Slidable(
      key: Key(title),
      // 左侧滑动操作
      actions: [
        IconSlideAction(
          caption: 'Archive',
          color: color.withOpacity(0.8),
          icon: Icons.archive,
          onTap: () => debugPrint('Archive $title'),
        ),
      ],
      // 右侧滑动操作
      secondaryActions: [
        IconSlideAction(
          caption: 'Delete',
          color: Colors.red,
          icon: Icons.delete,
          onTap: () => debugPrint('Delete $title'),
        ),
      ],
      // Tile内容
      child: ListTile(
        leading: Container(
          width: 40,
          height: 40,
          decoration: BoxDecoration(
            color: color,
            borderRadius: BorderRadius.circular(8),
          ),
          child: const Icon(Icons.label, color: Colors.white),
        ),
        title: Text(title),
        subtitle: const Text('Swipe left/right for actions'),
        trailing: const Icon(Icons.arrow_forward_ios),
      ),
    );
  }
}

// 你的固定Header组件
class FixedHeader extends StatelessWidget {
  const FixedHeader({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 24),
      color: Colors.blueAccent,
      width: double.infinity,
      child: const Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            '固定头部',
            style: TextStyle(
              fontSize: 24,
              fontWeight: FontWeight.bold,
              color: Colors.white,
            ),
          ),
          SizedBox(height: 8),
          Text(
            '这个头部不会跟随滚动',
            style: TextStyle(color: Colors.white70),
          ),
        ],
      ),
    );
  }
}

关键细节说明 #

1. 固定Header：直接放在Column的顶部，没有任何滚动相关的包裹，所以会一直固定在屏幕上方
2. 滚动主体：用Expanded包裹SingleChildScrollView是为了让滚动区域自动填充Header下方的剩余空间，避免出现布局溢出问题
3. Slidable Tile：通过封装_buildSlidableTile方法，可以快速生成多个硬编码的滑动项，你可以根据自己的需求修改滑动操作、Tile样式等

这样实现的效果完全符合你的需求：Header固定不动，主体部分可以自由滚动，每个Tile都支持左右滑动操作。

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