时间戳

首页 > 解决方案 > Flutter Scrollbar 防止滚动条出现在水平列表视图上

flutter - Flutter Scrollbar 防止滚动条出现在水平列表视图上

问题描述

垂直滚动时，我的小部件树顶部有一个Scrollbar显示在右侧。现在在我的小部件树中，我有一个水平的ListView. 如果用户水平滚动，滚动条也会显示在那里。我不想在ScrollBar那里出现。有什么常见的方法可以禁用在水平轴上的显示吗？

@override
  Widget build(BuildContext context) {

    return SafeArea(
      child: Scrollbar(
        child: SingleChildScrollView(
          child: Container(
            height: MediaQuery.of(context).size.height * 5,
            margin: EdgeInsets.all(25),
            child: Column(
              children: <Widget>[
                Row(
                   ...

稍后在列表视图中：

      Expanded(child:
            Consumer<Model>(builder: (context, myModel, child) {
          return ListView.builder(
            physics: NeverScrollableScrollPhysics(),
            scrollDirection: Axis.vertical,
            itemCount: list.length,
            itemBuilder: (ctx, index) => ChangeNotifierProvider.value(
              value: list[index],
              child: GestureDetector(

标签： flutterdartflutter-layout

解决方案

想象一下，您有一个包含两个 ListView 的小部件：

Scrollbar(
    controller: scrollController,
    child: ListView.builder(
      controller: scrollController,
      scrollDirection: Axis.vertical,
      physics: AlwaysScrollableScrollPhysics(),
      itemBuilder: (context, index) {
        return SizedBox(
          height: 90,
          child: ListView.separated(
            scrollDirection: Axis.horizontal,
            physics: AlwaysScrollableScrollPhysics(),
            itemBuilder: (context, index) {
              return Container(
                height: 100,
                width: 100,
                color: Colors.blue,
              );
            },
            separatorBuilder: (context, index) {
              return SizedBox(
                width: 10,
              );
            },
            itemCount: 50,
          ),
        );
      },
      itemCount: 50,
    ),
  ),

一个简单的解决方案是使用NotificationListener包装 ListView并将onNotification设置为返回 true。在这种情况下，水平 ListView 将是有问题的小部件。这将告诉 NotificationListener 通知已被处理，这将阻止它向上发送 ScrollNotification 控件树。

所以解决方案是：

 Scrollbar(
    controller: scrollController,
    child: ListView.builder(
      controller: scrollController,
      scrollDirection: Axis.vertical,
      physics: AlwaysScrollableScrollPhysics(),
      itemBuilder: (context, index) {
        return SizedBox(
          height: 90,
          child: NotificationListener<ScrollNotification>(
            onNotification: (_) => true,
            child: ListView.separated(
              scrollDirection: Axis.horizontal,
              physics: AlwaysScrollableScrollPhysics(),
              itemBuilder: (context, index) {
                return Container(
                  height: 100,
                  width: 100,
                  color: themeColor,
                );
              },
              separatorBuilder: (context, index) {
                return SizedBox(
                  width: 10,
                );
              },
              itemCount: 50,
            ),
          ),
        );
      },
      itemCount: 50,
    ),
  ),

要深入了解，请考虑阅读 文档

推荐阅读