如何在 Flutter 應用程序中創建堆疊圖像的 GridView？

Question

我想創造什么

下圖顯示了我想在flutter app中創建的布局。

編碼

然后我寫了下面的代碼。

// 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(
                         ^

如何創建像圖片一樣的顫振布局？

Answer 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"))
              );
            })
          )
        );
      })
    );
  })
  }
}

如果您需要更多幫助，請在評論中告訴我

Answer 2

您必須在列中向孩子們提供您的清單

喜歡：列（孩子：你的名單在這里）