Horizontal SingleChildScrollView 在 Windows 上的 Column 内不工作

Question

更新：感谢所有回复。再检查一遍。它只是不适用于 Windows。 android 和 macos 工作正常。

---

我无法滚动行。我已将 Column.crossAxisAlignment 设置为

stretch

并将

SingleChildScrollView.scrollDirection

设置为水平。我错过了什么？

    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Row(children: [
              Text(' lis sdf sd fsd fsdf ifje fsiduhf iushdf sdf '),
              ElevatedButton(
                  onPressed: () {},
                  child: Text(' lis sdf sd fsd fsdf ifje fsiduhf iushdf sdf ')),
              Text(' lis sdf sd fsd fsdf ifje fsiduhf iushdf sdf ')
            ]),
          )
        ],
      ),
    );

Answer 1

ScrollBehaviors 现在允许或禁止从指定的 PointerDeviceKinds 拖动滚动。默认情况下，ScrollBehavior.dragDevices 允许滚动小部件被除 PointerDeviceKind.mouse 之外的所有 PointerDeviceKind 拖动。

启用触摸滚动扩展

MaterialScrollBehavior

并提供

MaterialApp

.

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      scrollBehavior: MyCustomScrollBehavior(),
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeWT(),
    );
  }
}

更多关于

ScrollBehaviors

.

迁移后的代码：

// Only manually add a `Scrollbar` when not on desktop platforms.
// Or, see other migrations for changing `ScrollBehavior`.
switch (currentPlatform) {
  case TargetPlatform.linux:
  case TargetPlatform.macOS:
  case TargetPlatform.windows:
    return child;
  case TargetPlatform.android:
  case TargetPlatform.fuchsia:
  case TargetPlatform.iOS:
    return Scrollbar(
      controller: controller,
      child: child;
    );
}

查看有关迁移指南和自定义滚动行为的更多信息。

Answer 2

尝试下面的代码并将您的小部件包裹在

SizedBox

或

Container

中给它宽度和高度

body:SingleChildScrollView(
        child: Column(
          children: [
            Text('Add below or above other widgets'),
            SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: Column(
                children: [
                  Row(
                    children: [
                      Text(' lis sdf sd fsd fsdf ifje fsiduhf iushdf sdf '),
                      ElevatedButton(
                        onPressed: () {},
                        child: Text(
                            ' lis sdf sd fsd fsdf ifje fsiduhf iushdf sdf '),
                      ),
                      Text(' lis sdf sd fsd fsdf ifje fsiduhf iushdf sdf ')
                    ],
                  ),
                ],
              ),
            ),
            Text('Add below or above other widgets'),
          ],
        ),
      ),

结果屏幕->

Answer 3

您可以利用提供的自定义类通过单击和拖动或鼠标滚轮启用滚动，从而使您可以轻松浏览内容（也在 Flutter web 中）。

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      scrollBehavior: MyCustomScrollBehavior(),
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: theme(),
      home: ChannelInfoScreen(),
    );
  }
}

class MyCustomScrollBehavior extends MaterialScrollBehavior {
  @override
  Set<PointerDeviceKind> get dragDevices => {
        PointerDeviceKind.touch,
        PointerDeviceKind.mouse,
        PointerDeviceKind.stylus,
        PointerDeviceKind.unknown,
      };
}