如何在 Flutter 应用中创建堆叠图像的 GridView？答案

【问题标题】：How to create GridView of stacked images in Flutter app?如何在 Flutter 应用中创建堆叠图像的 GridView？
【发布时间】：2020-11-22 14:04:32
【问题描述】：

我想创造什么

下图是我想在一个flutter应用中创建的布局。

代码

然后我写了以下代码。

// main.dart
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Board(),
      debugShowCheckedModeBanner: false,
    );
  }
} 

class Board extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      primary: false,
      padding: const EdgeInsets.all(12),
      crossAxisSpacing: 4,
      mainAxisSpacing: 4,
      crossAxisCount: 5,
      children: List.generate(30, (index) {
        return Container(
          child: Column(
            List.generate(3, (index) {
              return FractionallySizedBox(
                widthFactor: 1,
                heightFactor: 0.3333,
                child: Image(image: AssetImage("assets/piece_b.png"))
              );
            })
          )
        );
      })
    );
  })
  }
}

// pubspec.yaml
flutter:
  assets:
    - assets/piece_b.png
    - assets/piece_w.png

错误

但是，报错如下。

Error: Too many positional arguments: 0 allowed, but 1 found.
Try removing the extra positional arguments.
            child: Column(
                         ^

如何创建像图片一样的颤振布局？

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

在Column里面应该是children:你错过了

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Board(),
      debugShowCheckedModeBanner: false,
    );
  }
} 

class Board extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      primary: false,
      padding: const EdgeInsets.all(12),
      crossAxisSpacing: 4,
      mainAxisSpacing: 4,
      crossAxisCount: 5,
      children: List.generate(30, (index) {
        return Container(
          child: Column(
            children:List.generate(3, (index) {
              return FractionallySizedBox(
                widthFactor: 1,
                heightFactor: 0.3333,
                child: Image(image: AssetImage("assets/piece_b.png"))
              );
            })
          )
        );
      })
    );
  })
  }
}

如果您需要更多帮助，请在 cmets 中告诉我

【讨论】：

【解决方案2】：

您必须向列中的孩子提供您的列表

喜欢： 列( 孩子们：你的名单在这里 )

【讨论】：