flutter - Flutter GridView 图像放大缩小

Question

我是新手，我想尝试制作一个响应式网格视图来显示图像。

例如：

这是初始状态：

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

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

标签： flutterflutter-layoutflutter-widget

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意愿也会更新。