flutter web 不能滚动(滑动)

628 阅读1分钟

修改下Flutter MaterialApp 默认的滚动行为即可

import 'dart:ui';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

//为了支持鼠标滑动,我们需要通过以下步骤更改应用程序的默认滚动行为:
//1-创建一个类,从MaterialScrollBeavior扩展它,并覆盖dragDevices
//2-将AppScrollBehavior实例传递给MaterialApp的scrollBehavior属性:
class AppScrollBehavior extends MaterialScrollBehavior {
  @override
  Set<PointerDeviceKind> get dragDevices => {
        PointerDeviceKind.touch,
        PointerDeviceKind.mouse,
      };
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "flutterDemo",
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
      scrollBehavior: AppScrollBehavior(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State createState() => _HomePageState();
}

class _HomePageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("appbarTitle"),
        centerTitle: true,
        elevation: 0.0,
      ),
      body: CupertinoTimerPicker(
        onTimerDurationChanged: (value) {},
      ),
    );
  }
}