flutter 滚动条不可拖动

lztngnrs 于 2023-05-08 发布在 Flutter

关注(0)|答案(4)|浏览(242)

我可以看到ListView中的滚动条，并且可以滚动ListView。但问题是我不能使用/拖动滚动条来滚动ListView。它只是作为一个指示器出现，不响应触摸/手势。
这是ScrollBar的预期行为还是我做错了什么？如果是这样，我如何在本机实现这一点（不使用包，或者我必须这样做）？

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  final ScrollController _scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Scrollbar(
            isAlwaysShown: true,
            controller: _scrollController,
            child: ListView.builder(
                controller: _scrollController,
                itemCount: 100,
                itemBuilder: (context, index) {
                  return Card(
                      child: ListTile(
                    title: Text("Item: ${index + 1}"),
                  ));
                }),
          ),
        ),
      ),
    );
  }
}

flutter

来源：https://stackoverflow.com/questions/64214719/scrollbar-is-not-draggable

4条答案

按热度按时间

shyt4zoc1#

可以使用draggable_scrollbar。通过使用可拖动的滚动条，下面给出了完整的代码。

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

class MyApp extends StatelessWidget {
  final ScrollController _scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: DraggableScrollbar.rrect(
            controller: _scrollController,
            padding: EdgeInsets.zero,
            child: ListView.builder(
                controller: _scrollController,
                itemCount: 100,
                itemBuilder: (context, index) {
                  return Card(
                      child: ListTile(
                    title: Text("Item: ${index + 1}"),
                  ));
                }),
          ),
        ),
      ),
    );
  }
}

赞(0）回复(0）举报 2023-05-08

mf98qq942#

我发现了两种简单的方法来使滚动条可拖动（基于Flutter 3.0），而无需导入第三方插件：答：在滚动条设置中，添加

interactive: true,

B：将Scrollbar替换为CupertinoScrollbar。无论出于何种原因，Cupertino滚动条的默认行为似乎正是您正在寻找的，即。其具有可拖动的滚动条，该滚动条不仅仅用作轴指示器。

赞(0）回复(0）举报 2023-05-08

dfddblmv3#

只要使用RawScrollbar而不是Scrollbar-它将使滚动条拖动和轨道也点击

RawScrollbar(
  controller: jobScrollController,
  thumbColor: colorCode.withOpacity(0.8),
  radius: const Radius.circular(3.0),
  thickness: 10,
  child: ListView.builder(),
),

赞(0）回复(0）举报 2023-05-08

0lvr5msh4#

使用RawScrollbar小部件来实现这一点

赞(0）回复(0）举报 2023-05-08