【问题标题】:Horizontal listview not scrolling on web but scrolling on mobile水平列表视图不在网络上滚动但在移动设备上滚动
【发布时间】:2021-11-08 06:16:35
【问题描述】:

flutter 2.5 更新后列表视图仅在移动平台上滚动。当我在网络上打开它时它不会滚动。它在以前的版本中运行良好。我尝试了滚动物理,但它没有用。你建议我怎么做?对不起我的英语不好。


          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
                                        ]))
                                    ),
                                  ],
                                ),
                              ),
                              

【问题讨论】:

  • 试试:MaterialApp( scrollBehavior: MaterialScrollBehavior().copyWith( dragDevices: {PointerDeviceKind.mouse}, ), ...
  • 感谢@pskink,它的工作。

标签: flutter listview web scroll


【解决方案1】:

Flutter 2.5 总结

ScrollBehaviors 现在允许或禁止从指定的拖动滚动 指针设备种类。 ScrollBehavior.dragDevices,默认情况下,允许 由所有 PointerDeviceKinds 拖动的滚动小部件,除了 PointerDeviceKind.mouse.

// Set ScrollBehavior for an entire application.
MaterialApp(
  scrollBehavior: MyCustomScrollBehavior(),
  // ...
);
class MyCustomScrollBehavior extends MaterialScrollBehavior {
  // Override behavior methods and getters like dragDevices
  @override
  Set<PointerDeviceKind> get dragDevices => {
        PointerDeviceKind.touch,
        PointerDeviceKind.mouse,
      };
}

参考:Documentation

【讨论】:

  • 非常感谢,我一直在寻找使用Flutter进行Web开发的水平滚动问题。
  • 是否应该完全按照您在此处编写的内容包含在内?我得到“未定义的名称 PointerDeviceKind”。我还注意到,在您链接到的页面底部链接的 PointerDeviceKind 的 Flutter 文档页面是 404。master-api.flutter.dev/flutter/dart-ui/…
猜你喜欢
  • 2017-05-23
  • 1970-01-01
  • 2011-05-10
  • 1970-01-01
  • 2023-03-23
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多