Как включить полосу прокрутки для вертикальной прокрутки и отключить для горизонтальной? - PullRequest
Новая
       30

Как включить полосу прокрутки для вертикальной прокрутки и отключить для горизонтальной?

0 голосов
/ 24 февраля 2020

Я строил макет с горизонтальной и вертикальной прокруткой. Вертикальная прокрутка 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}"),
    );
  }
}

Scrolling demonstration

Обратите внимание на дно на горизонтальная прокрутка

1 Ответ

1 голос
/ 19 марта 2020 
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 вокруг виджета Scrolling, вы не хотите, чтобы появилась полоса прокрутки. Это решило это для меня!

...