如何为垂直滚动启用滚动条并为水平滚动禁用滚动条？

Question

我一直在构建水平和垂直滚动的布局。垂直滚动 Column 用于主要内容，由不同的视图填充，包括显示促销横幅的水平 ListView。我想显示垂直滚动的滚动条，而不是水平滚动条。我已经包装了 SingleChildScrollView，这使得 Column 可以在 ScrollBar 中滚动，但是该栏出现在水平滚动条的两个垂直方向上。这些东西有什么微调吗？

演示问题的示例

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Scrollables',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Scrollbar(
        child: new SingleChildScrollView(
            child: new Container(
          padding: EdgeInsets.only(top: 40.0),
          child: Column(children: <Widget>[
            HorizontalListView(),
            VerticalListView(),
          ]),
        )),
      ),
    );
  }
}

class HorizontalListView extends StatelessWidget {
  var items = new List<String>();

  _addNewItem(int index) {
    items.add("Item $index");
  }

  @override
  Widget build(BuildContext context) => Container(
      height: 120,
      child: ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: 15,
          itemBuilder: (context, index) {
            return Card(child: ListItem(index));
          }));
}

class VerticalListView extends StatelessWidget {
  var items = new List<String>();

  _addNewItem(int index) {
    items.add("Item $index");
  }

  @override
  Widget build(BuildContext context) => Container(
      child: ListView.builder(
          scrollDirection: Axis.vertical,
          itemCount: 50,
          shrinkWrap: true,
          physics: const NeverScrollableScrollPhysics(),
          itemBuilder: (context, index) {
            return ListItem(index);
          }));
}

class ListItem extends StatelessWidget {
  int _index;
  ListItem(this._index);
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 280,
      child: Text("Item ${this._index}"),
    );
  }
}

横向滚动注意底部

Answer 1

class NoScrollbar extends StatelessWidget {
  final Widget child;
  const NoScrollbar({Key key, this.child}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return NotificationListener<ScrollNotification>(
      onNotification: (_) => true,
      child: child,
    );
  }
}

只需将 NoScrollbar Widget 包裹在 Scrolling Widget 周围，您不想让 Scrollbar 出现。这为我解决了！

Answer 2

Niklas 的回答在 Flutter 2.5 中对我不起作用。不知道是我的布局不一样还是什么。但是，如果您在 ListView 中有一个 PageView（例如轮播），我发现删除 PageView 滚动条的方法如下。

添加到 Scrollbar 小部件 notificationPredicate:

notificationPredicate: (ScrollNotification notification) {
  return notification.depth == 0 && notification.metrics.axis == Axis.vertical;
}

这只会显示垂直交互的滚动条。

关于 notificationPredicate 的 Flutter 文档。

如何为垂直滚动启用滚动条并为水平滚动禁用滚动条？

How do I enable scrollbar for vertical scroll and disable for horizontal?

listview

scrollbar

dart

flutter

singlechildscrollview