Flutter listview.builder 不水平滚动

Question

我一直在使用flutter包Side Sheet，在侧表里面我有一个

Listview.builder

，我想让它水平滚动（位于代码片段的底部），我已经给出了宽度和高度，但它不水平滚动，有人能发现这里的问题吗？

return Stack(
  children: [
    // The map widget
    FlutterMap(
      options: MapOptions(
        initialCenter: latitudeLongitude,
        initialZoom: 13.0,
      ),
      children: [
        TileLayer(
          urlTemplate:
              'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
          subdomains: ['a', 'b', 'c'],
          tileProvider: CancellableNetworkTileProvider(),
        ),
      ],
    ),
    // Positioned widget for the buttons in the top right corner
    Positioned(
      top: 16.0,
      right: 16.0,
      child: Row(
        children: [
          ElevatedButton(
            onPressed: () => SideSheet.right(
              body: 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, // Fixed height for ListView
                      child: ListView.builder(
                        scrollDirection: Axis.horizontal,
                        itemCount: 20,
                        itemBuilder: (context, index) {
                          return Card(
                            elevation: 4,
                            margin: EdgeInsets.all(8),
                            child: Container(
                              width: 120, // Fixed width for each card
                              child: Center(
                                child: Text(
                                  viewModel.items[index],
                                  style: TextStyle(fontSize: 18),
                                ),
                              ),
                            ),
                          );
                        },
                      ),
                    ),
                  ],
                ),
              ),
              width: MediaQuery.of(context).size.width * 0.3,
              context: context,
            ),
            child: Icon(Icons.remove_red_eye),
          ),
          SizedBox(height: 20),
        ],
      ),
    ),
  ],
);

Answer 1

这里发生了很多事情，但由于您使用堆栈来在地图顶部进行滚动，因此您可能需要使用 pointer_interceptor 库来拦截指针事件（在 Flutter Web 上）。

我在 Android 模拟器上测试了这段代码，它运行良好。