需要包裹一个可滑动区域，当可滑动时，会显示滑动的bar用于指示。

相关组件

ListView SingleChildScrollView CupertinoScrollbar

Scrollbar基本使用

【child】 : 子组件 【Widget】
【controller】 : 控制器 【ScrollController】
158.gif

  1. import 'package:flutter/material.dart';
  2. class CustomScrollbar extends StatelessWidget {
  3.   final data = <Color>[
  4.     Colors.purple[50],
  5.     Colors.purple[100],
  6.     Colors.purple[200],
  7.     Colors.purple[300],
  8.     Colors.purple[400],
  9.     Colors.purple[500],
  10.     Colors.purple[600],
  11.     Colors.purple[700],
  12.     Colors.purple[800],
  13.     Colors.purple[900],
  14.   ];
  16.   @override
  17.   Widget build(BuildContext context) {
  18.     return Container(
  19.       height: 200,
  20.       child: Scrollbar(
  21.         child: ListView(
  22.           padding: EdgeInsets.symmetric(horizontal: 5),
  23.           children: data
  24.               .map((color) => Container(
  25.             alignment: Alignment.center,
  26.             width: 100,
  27.             height: 50,
  28.             color: color,
  29.             child: Text(
  30.               colorString(color),
  31.               style: TextStyle(color: Colors.white, shadows: [
  32.                 Shadow(
  33.                     color: Colors.black,
  34.                     offset: Offset(.5, .5),
  35.                     blurRadius: 2)
  36.               ]),
  37.             ),
  38.           ))
  39.               .toList(),
  40.         ),
  41.       ),
  42.     );
  43.   }
  45.   String colorString(Color color) =>
  46.       "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
  47. }