flutter - 如何在布局中随机放置小部件
问题描述
假设我想将小部件随机放置在特定布局中,如下图所示,我该如何实现?
我正在考虑使用 wrap 小部件,但这并没有停止工作,因为它不会随机排列一行中的孩子。我的代码到现在
return Wrap(
spacing: 30,
children: [
buildprofile(),
buildprofile(),
buildprofile(),
buildprofile(),
],
);
buildprofile() {
return Column(
children: [
CircleAvatar(
radius: 64,
backgroundColor: Colors.pink,
child: (CircleAvatar(
radius: 62,
backgroundImage: NetworkImage(profilepic),
)),
),
SizedBox(
height: 10,
),
Text(
"Sivaram",
style: mystyle(16, Colors.black, FontWeight.w700),
)
],
);
}
解决方案
你可以使用flutter_staggered_grid_view
StaggeredGridView.count(
crossAxisCount: 4,
children: List.generate(
3,
(index) => Center(
child: CircleAvatar(
radius: 64,
backgroundColor: Colors.pink,
),
)),
staggeredTiles: [
StaggeredTile.count(2, 2), // takes up 2 rows and 2 columns space
StaggeredTile.count(2, 1), // takes up 2 rows and 1 column
StaggeredTile.count(1, 2), // takes up 1 row and 2 column space
], // scatter them randomly
);
推荐阅读
- google-app-engine - 将图像上传到 Google 存储桶
- r - 提取具有 NA 值的给定缓冲区附近的像素值和坐标
- javascript - 这种移动导航菜单的实现是否与 IOS 不兼容?
- angular - 如何让 Angular Universal 等待 API 响应?我使用了 transferState、resolve on route 等
- python - ValueError:加载先前保存的模型时轴与数组不匹配
- sql - oracle 中的 NVL 函数不返回任何记录
- javascript - Kendo-UI MVC Grid Action Delete 路由到 Create 并且 Create 被多次调用
- r - 用 sjPlot 绘制 glmer 模型
- angularjs - 无法跳出搜索框
- antd - 是否可以将 Ant Design 与 vanilla JS 一起使用?