Flutter中SideSheet内ListView.builder无法横向滚动问题排查

你的横向ListView无法滚动的核心原因是SideSheet默认会自动给body添加垂直方向的SingleChildScrollView，这个组件会拦截横向滚动的手势，导致ListView无法响应横向滑动操作。

解决步骤 #

1. 禁用SideSheet的自动垂直滚动 #

在调用SideSheet.right()时添加scrollable: false参数，关闭自动滚动功能：

SideSheet.right(
  scrollable: false, // 关键：禁用自动垂直滚动
  body: Padding(
    padding: const EdgeInsets.all(20.0),
    child: Column(
      children: [
        // ... 原有DropdownSearch代码
        const SizedBox(height: 20),
        // ... 原有横向ListView代码
      ],
    ),
  ),
  width: MediaQuery.of(context).size.width * 0.3,
  context: context,
),

2. 手动处理垂直滚动（可选） #

如果侧边栏的内容高度超过了SideSheet的可视高度，需要手动给Column包裹一个垂直方向的SingleChildScrollView，避免内容溢出：

SideSheet.right(
  scrollable: false,
  body: SingleChildScrollView( // 手动添加垂直滚动
    child: Padding(
      padding: const EdgeInsets.all(20.0),
      child: Column(
        children: [
          // ... 原有子组件
        ],
      ),
    ),
  ),
  width: MediaQuery.of(context).size.width * 0.3,
  context: context,
),

3. 额外检查：确保ListView有足够的横向空间 #

如果你的SideSheet宽度设置过小（比如0.3 * 屏幕宽度），外层Container的width:200可能会被父级约束压缩，导致ListView视口宽度不足。可以适当调整SideSheet的宽度比例，比如改为0.4 * 屏幕宽度，或者设置固定宽度：

width: MediaQuery.of(context).size.width * 0.4,
// 或者固定宽度
width: 300,

修改后的完整关键代码片段 #

ElevatedButton(
  onPressed: () => SideSheet.right(
    scrollable: false,
    body: SingleChildScrollView(
      child: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          children: [
            // Drop down multi select
            DropdownSearch<String>.multiSelection(
              items: (f, cs) => viewModel.dashboardModels
                  .map((model) =>
                      '${model.name} - Start Date ${model.startDate}')
                  .toList(),
              decoratorProps: DropDownDecoratorProps(
                decoration: InputDecoration(
                  labelText: 'Dashboard Models:',
                  border: OutlineInputBorder(),
                  floatingLabelBehavior:
                      FloatingLabelBehavior.always,
                ),
              ),
              dropdownBuilder: (ctx, selectedItems) {
                if (selectedItems.isEmpty) {
                  return Text("Please choose a model");
                }

                final selectedItemsString =
                    selectedItems.join(", ");

                return Row(
                  children: [
                    Icon(Icons.remove_red_eye, size: 20),
                    SizedBox(width: 8),
                    Expanded(child: Text(selectedItemsString)),
                  ],
                );
              },
              onChanged: (values) {
                // Handle selection changes
              },
            ),
            const SizedBox(height: 20),
            // Listview Builder
            Container(
              width: 200,
              height: 150,
              child: ListView.builder(
                scrollDirection: Axis.horizontal,
                itemCount: 20,
                itemBuilder: (context, index) {
                  return Card(
                    elevation: 4,
                    margin: EdgeInsets.all(8),
                    child: Container(
                      width: 120,
                      child: Center(
                        child: Text(
                          viewModel.items[index],
                          style: TextStyle(fontSize: 18),
                        ),
                      ),
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    ),
    width: MediaQuery.of(context).size.width * 0.4,
    context: context,
  ),
  child: Icon(Icons.remove_red_eye),
),

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