[英]How to create GridView of stacked images in Flutter app?
下图显示了我想在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(
^
如何创建像图片一样的颤振布局?
在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"))
);
})
)
);
})
);
})
}
}
如果您需要更多帮助,请在评论中告诉我
您必须在列中向孩子们提供您的清单
喜欢:列(孩子:你的名单在这里)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.