Flutter GridView 图片放大缩小

Question

我是 flutter 的新手，我想尝试制作一个响应式 gridview 来显示图像。

例如：

这是初始状态：

更改栏后我想让屏幕看起来像这样：

我的主要问题是我不知道如何实现这个放大缩小栏：

Answer 1

要制作可滚动的网格，您应该使用 GridView。

GridView 需要一个委托来告诉它如何布局其子项。在这种情况下，您可能希望使用 SliverGridDelegateWithFixedCrossAxisCount。请注意它有一个 crossAxisCount，表示一行中的项目数。

GridView(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 4, // <<<< Here
        childAspectRatio: 0.5,
      ),
      children: List<Widget>.generate(20, (int i) {
        return Builder(builder: (BuildContext context) {
          return Text('$i');
        });
      }),
    );

然后您可以在滑块更改时更新 crossAxisCount，您的 GridView 也会更新。

Flutter GridView 图片放大缩小

Flutter GridView images zoom in zoom out

flutter

flutter-layout

flutter-widget