水平列表视图不在网页上滚动，但在移动设备上滚动

Question

flutter 2.5更新后listview仅在移动平台上滚动。当我在网络上打开它时，它不会滚动。它在以前的版本中运行良好。我尝试了滚动物理，但它不起作用。你建议我做什么？抱歉我的英语不好。

          return SizedBox(
            height: 400,
            child: ListView.builder(
                physics: ClampingScrollPhysics(),
                scrollDirection: Axis.horizontal,
                // ignore: unnecessary_null_comparison
                itemCount: items == null ? 0 : items.length,
                itemBuilder: (context, index) {
                  return GestureDetector(
                      onTap: () {
                        LoginForm();
                      },
                      child: Container(
                        margin:
                            EdgeInsets.symmetric(horizontal: 20, vertical: 6),
                        child: SizedBox(
                          width: 400,
                          height: 50,
                          child: Stack(
                            fit: StackFit.expand,
                            children: <Widget>[
                              Container(
                                decoration: BoxDecoration(
                                    borderRadius:
                                        BorderRadius.all(Radius.circular(20.0)),
                                    boxShadow: [
                                      BoxShadow(
                                          color: fromCssColor(
                                              items[index].color.toString()),
                                          // color: Colors.black38,
                                          offset: Offset(2.0, 2.0),
                                          blurRadius: 5.0,
                                          spreadRadius: 1.0)
                                    ]),
                              ),
                              ClipRRect(
                                borderRadius:
                                    BorderRadius.all(Radius.circular(20.0)),
                                child: Image.asset(
                                  items[index].image.toString(),
                                  fit: BoxFit.cover,
                                ),
                              ),
                              Container(
                                decoration: BoxDecoration(
                                    borderRadius:
                                        BorderRadius.all(Radius.circular(20.0)),
                                    gradient: LinearGradient(
                                        begin: Alignment.topCenter,
                                        end: Alignment.bottomCenter,
                                        colors: [
                                          Colors.transparent,
                                          Colors.black45
                                        ]))
                                    ),
                                  ],
                                ),
                              ),
                              

Answer 1

Flutter 2.5 总结

ScrollBehaviors

现在允许或禁止从指定位置拖动滚动

PointerDeviceKinds

。

ScrollBehavior.dragDevices

，默认情况下允许 滚动小部件可被所有

PointerDeviceKinds

拖动，除了

PointerDeviceKind.mouse

。

import 'package:flutter/material.dart';

// Set ScrollBehavior for an entire application.
MaterialApp(
  scrollBehavior: MyCustomScrollBehavior(),
  // ...
);

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

class MyCustomScrollBehavior extends MaterialScrollBehavior {
  // Override behavior methods and getters like dragDevices
  @override
  Set<PointerDeviceKind> get dragDevices => {
        PointerDeviceKind.touch,
        PointerDeviceKind.mouse,
      };
}

参考官方文档。

Answer 2

如果您想要特定小部件的解决方案，请尝试以下

    class MyCustomScrollBehavior extends MaterialScrollBehavior {
      // Override behavior methods and getters like dragDevices
      @override
      Set<PointerDeviceKind> get dragDevices => { 
        PointerDeviceKind.touch,
        PointerDeviceKind.mouse,
        // etc.
      };
    }
    
    // ScrollBehavior can be set for a specific widget.
    final ScrollController controller = ScrollController();
    ScrollConfiguration(
      behavior: MyCustomScrollBehavior(),
      child: ListView.builder(
        controller: controller,
        itemBuilder: (BuildContext context, int index) {
         return Text('Item $index');
        }
      ),
    );

更多信息flutter开发

Answer 3

我能够通过将以下代码放入我的 MaterialApp 小部件中来解决这个问题

  scrollBehavior: const MaterialScrollBehavior().copyWith(
    dragDevices: {PointerDeviceKind.mouse},
  ),

我的代码

return MaterialApp(
  scrollBehavior: const MaterialScrollBehavior().copyWith(
    dragDevices: {PointerDeviceKind.mouse},
  ),
  title: 'Flutter app',
  debugShowCheckedModeBanner: false,
  theme: ThemeData(useMaterial3: true),
  home: const SplashScreen(),
);