Flutter Scrollable Widget使用详解

Flutter的Scrollable小部件提供了在屏幕上滚动其子部件的能力。它不会具体指定子部件的外观或排列方式，而是依赖于它的子类，例如ListView和GridView。以下是Scrollable小部件的一些用法示例：

垂直滚动

Scrollable(
  axisDirection: AxisDirection.down,
  child: Column(
    children: [
      Container(height: 100, color: Colors.blue),
      Container(height: 100, color: Colors.green),
      Container(height: 100, color: Colors.orange),
      Container(height: 100, color: Colors.purple),
      Container(height: 100, color: Colors.yellow),
    ],
  ),
)

水平滚动

Scrollable(
  axisDirection: AxisDirection.right,
  child: Row(
    children: [
      Container(width: 100, color: Colors.blue),
      Container(width: 100, color: Colors.green),
      Container(width: 100, color: Colors.orange),
      Container(width: 100, color: Colors.purple),
      Container(width: 100, color: Colors.yellow),
    ],
  ),
)

同时垂直和水平滚动

Scrollable(
  axisDirection: AxisDirection.down,
  controller: ScrollController(),
  physics: BouncingScrollPhysics(),
  viewportBuilder: (BuildContext context, ViewportOffset position) {
    return Viewport(
      axisDirection: AxisDirection.right,
      offset: position,
      slivers: [
        SliverToBoxAdapter(
          child: Container(height: 200, color: Colors.blue),
        ),
        SliverGrid.count(
          crossAxisCount: 5,
          children: [
            Container(color: Colors.green),
            Container(color: Colors.orange),
            Container(color: Colors.purple),
            Container(color: Colors.yellow),
          ],
        ),
      ],
    );
  },
)

在这个例子中，我们使用了Viewport和Sliver来构建一个具有滚动效果的网格布局。

其他属性

除了上述用法外，Scrollable小部件还有许多其他属性，如：

• controller：控制滚动位置的ScrollController对象。
• physics：控制滚动的物理特性，如滑动摩擦力和滚动惯性。
• scrollDirection：滚动方向，可以是水平或垂直方向。
• reverse：是否反向滚动。
• primary：是否为主滚动视图。如果为true，则当用户在小部件周围滑动时，小部件将接收滚动事件，而不是其父小部件。
• shrinkWrap：是否只滚动可见部分。如果为true，则小部件的大小将被其子部件的总高度或宽度所限制。
• dragStartBehavior：确定滚动开始的行为，如何识别滚动手势（可能的值为start、down或move）。

这些属性可以根据需要进行调整，以满足具体的场景需求。