如何在布局中随机放置小部件

Posted 2023-02-23

【中文标题】如何在布局中随机放置小部件

【英文标题】：How to randomly position widgets in a layout

【发布时间】：2021-04-14 04:54:52

【问题描述】：

假设我想在特定布局中随机放置小部件，如下图所示，我该如何实现？

我正在考虑使用 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),
      )
    ],
  );

【问题讨论】：

每个小部件可以重叠吗？如果你允许它们重叠，我想我有办法

每个小部件可以重叠是什么意思，您是指配置文件小部件

是的，配置文件小部件。

不，我希望他们分开

【参考方案1】：

你可以使用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
  );

【讨论】：

非常感谢，正是我想要的

【参考方案2】：

您可以创建class Person，并存储个人资料名称和图像，

class Person 
  String name;
  String imageUrl;

并且在您的代码中可以将所有人员存储在数组中

List<Person> persons = [Person(), Person(),....]


Wrap(
   spacing: 30,
   children: _children
);

List<Widget> _children 
  List<Widget> _widgets = List<Widget>();
  List<Persons> _randomList = persons.shuffle();
   
  _randomList.forEach((person) 
      _widgets.add(_buildProfile(person))
   );

  return _widgets;

【讨论】：

我想你误解了我的问题，我不希望配置文件随机呈现，我希望它们的位置是随机的

您可以使用Positioned小部件并随机设置右、左、上、下属性