如何使布局在下图中显示在颤动中？答案

【问题标题】：How to make layouts show in below image in flutter?如何使布局在下图中显示在颤动中？
【发布时间】：2020-08-05 06:08:34
【问题描述】：

如何让这个圆形头像处于随机位置？
这是我的代码。我在容器内使用堆栈。还可以在堆栈和定位的小部件中使用圆形头像。

//main.dart
import 'package:application/start.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    initialRoute: '/',
    routes: {
      '/': (context) => Start(),
    },
  ));
}

//start.dart
import 'package:flutter/material.dart';

class Start extends StatefulWidget {
  @override
  _StartState createState() => _StartState();
}

class _StartState extends State<Start> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        child: AppBar(
          backgroundColor: Colors.blue,
        ),
        preferredSize: Size.fromHeight(
          5,
        ),
      ),
      body: SafeArea(
        child: Column(
          children: <Widget>[
            Expanded(
              child: Container(
                // color: Colors.purple,
                child: Stack(
                  children: <Widget>[
                    Positioned(
                      child: CircleAvatar(
                        radius: 30,
                        backgroundColor: Colors.black,
                      ),
                      top: 10,
                      left: 50,
                    ),
                  ],
                ),
              ),
            ),
            Expanded(
              child: Container(
                color: Colors.red,
              ),
            ),
            Expanded(
              flex: 2,
              child: Container(
                color: Colors.green,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

它适用于像在图像中显示这样的布局

【问题讨论】：

请描述你能做什么以及你究竟在做什么。能不能给个圈子头像？你能生成随机数吗？你能绝对定位一个元素吗？
我想要图片中显示的布局代码（i.stack.imgur.com/71bpo.jpg）。
我知道你想要什么。请告诉我们您尝试这样做时取得了多大的进展，以便我们可以帮助您解决您遇到的具体问题。
我使用容器小部件。在容器内我使用圆形头像。但是我如何将每个圆形头像放置在图像中显示的位置？

标签： flutter flutter-layout

【解决方案1】：

您可以使用dart:math 中的Random 来生成随机数。然后您可以使用LayoutBuilder 小部件来了解您有多少空间。最后，您可以使用 Positioned 小部件将小部件准确定位在您想要的位置，在本例中为您的随机坐标。

请注意，我不知道你的随机性的目的。您可能希望将此设置为StatefulWidget 并在调用build 之间保留随机数，这样当您的应用程序状态发生变化时，您的随机头像将保持在原处。或者可能不是。这是你的选择。

import 'dart:math';

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  final random = Random();
  final avatarSize = 50.0;
    
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(20.0),
      child: LayoutBuilder(builder: (context, constraints) {
      return Stack(
        children:[
          new Positioned(
            left: avatarSize + (constraints.biggest.width - 2 * avatarSize ) / 100.0 * random.nextInt(100),
            top: avatarSize + (constraints.biggest.height - 2 * avatarSize ) / 100.0 * random.nextInt(100),
            child: new CircleAvatar(
              radius: avatarSize / 2,
              child: new Text('1'),
              backgroundColor: Colors.yellow,
            )
        ),
        new Positioned(
          left: avatarSize + (constraints.biggest.width - 2 * avatarSize ) / 100.0 * random.nextInt(100),
          top: avatarSize + (constraints.biggest.height - 2 * avatarSize ) / 100.0 * random.nextInt(100),
          child: new CircleAvatar(
            radius: avatarSize / 2,
            child: new Text('2'),
            backgroundColor: Colors.red,
          )
        ),
        new Positioned(
          left: avatarSize + (constraints.biggest.width - 2 * avatarSize ) / 100.0 * random.nextInt(100),
          top: avatarSize + (constraints.biggest.height - 2 * avatarSize ) / 100.0 * random.nextInt(100),
          child: new CircleAvatar(
            radius: avatarSize / 2,
            child: new Text('3'),
            backgroundColor: Colors.blue,
          )
        ),
      ]);
  }));
  }
}

【讨论】：