如何启用垂直滚动的滚动条和禁用水平滚动的滚动条? [英] How do I enable scrollbar for vertical scroll and disable for horizontal?

问题描述

我一直在进行水平和垂直滚动的布局.垂直可滚动的 Column 用于主要内容，并由不同的视图填充，其中包括水平的 ListView (显示促销横幅).我想显示滚动条用于垂直滚动，但不显示水平滚动.我已经包装了 SingleChildScrollView ，这使 Column 在 ScrollBar 中可滚动，但是该条在水平滚动条上同时出现在垂直方向上.这些事情有什么微调吗?

I've been building layout with both horizontal and vertical scrolling. Vertical scrollable Column is for main content and is populated by different views, including horizontal ListView which shows promo banners. I wanted to show scrollbar for vertical scrolling, but not for horizontal. I've wrapped the SingleChildScrollView which makes Column scrollable in ScrollBar, but the bar appeared on both vertical on horizontal scrolls. Is there any fine-tuning for these kinds of things?

示例以证明问题

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}"),
    );
  }
}

在水平滚动时请注意底部

推荐答案

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出现.这为我解决了！

Just wrap the NoScrollbar Widget around the Scrolling Widget, you don't want to have the Scrollbar appear. This solved it for me!

这篇关于如何启用垂直滚动的滚动条和禁用水平滚动的滚动条?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！