如何在flutter的布局中随机定位小部件

如何解决如何在flutter的布局中随机定位小部件

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

我正在考虑使用 wrap widget ，但这并没有停止工作，因为它没有将孩子随机排列在一行中。我的代码到现在

return Wrap(
   spacing: 30,children: [
        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,// takes up 1 row and 2 column space
    ],// scatter them randomly
  );

,

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

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;
}