微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Flutter Web 2.0 中的滚动条

如何解决Flutter Web 2.0 中的滚动条

我正在尝试在我的网络应用程序中放置一个滚动条Scrollbar 出现了,但是当我尝试移动它时,它没有移动。我可以看到栏,但我不能拖动它。我可以使用鼠标滚轮滚动,但不能使用栏滚动。看到了 this 但它没有帮助。是关于 ScrollController? controller 还是什么?

这是我的代码

class CoverWidget extends StatelessWidget {
final widget;
const CoverWidget({Key key,@required this.widget}) : super(key: key);

@override
Widget build(BuildContext context) {
double w = MediaQuery.of(context).size.width;

return Scrollbar(
  isAlwaysShown: true,child: Container(
      margin: EdgeInsets.only(left: 15,right: 15,top: 15),padding: EdgeInsets.only(
        left: w * 0.05,right: w * 0.20,),decoration: Boxdecoration(
        color: Colors.white,borderRadius: BorderRadius.circular(0),BoxShadow: <BoxShadow>[
          BoxShadow(
              color: Colors.grey[300],blurRadius: 10,offset: Offset(3,3))
        ],child: widget
  ),);}}

解决方法

这是带有可滚动子项的 ScrollBar 的示例代码。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.blue,),home: Scaffold(
        body: SafeArea(
          child: CoverWidget(
            child: ListView(
              children: List.generate(
                100,(index) => ListTile(
                  title: Text('This is item #$index'),);
  }
}

class CoverWidget extends StatelessWidget {
  CoverWidget({
    required this.child,Key? key,}) : super(key: key);

  final Widget child;

  @override
  Widget build(BuildContext context) {
    return Scrollbar(
      isAlwaysShown: true,child: Container(
        margin: EdgeInsets.only(left: 15,right: 15,top: 15),decoration: const BoxDecoration(
          color: Colors.white,borderRadius: BorderRadius.all(Radius.circular(0)),boxShadow: <BoxShadow>[
            BoxShadow(
              color: Colors.grey,blurRadius: 10,offset: Offset(3,3),)
          ],child: child,);
  }
}

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。