同时实现两种布局,要求如下:
- 上下 各占一半 的应用布局空间;
- 上半部分:
- 横向显示 9 个比例条,比例条的 每一个部分 的 中间 显示该部分的比例;
- 每一条的总比例为 10,上部分比例分别为:
<int>[2, 5, 8, 3, 6, 9, 1, 4, 7]
,下部分比例为剩余数。
- 下半部分:
- 从 左上 至 右下 依次层叠 7 个方块;
- 下一个方块的 左上角顶点 为上一个方块的 中心点;
- 最后一个方块的右下角与区域右下角 顶点重合。
- 每个部分显示随机颜色。
- 不能使用
SizedBox
、Container
的width
或height
、ConstrainedBox
。
随机颜色生成器:
import 'dart:math' as math;
class RandomColor {
const RandomColor._();
static final math.Random _random = math.Random();
static Color getColor() {
return Color.fromARGB(
255,
_random.nextInt(255),
_random.nextInt(255),
_random.nextInt(255),
);
}
}
加分项:
- 当 横屏 时,区域显示为 左右 两块;竖屏 时,显示为 上下 两块;
- 上半部分:
- 支持总条数为 m,且每条比例条的区域数为 n 的比例条,并要求每个区域的比例均可以通过数组控制;
- 下半部分:
- 支持总数为 x 个方块的层叠;
- 在原有基础上,从 右上 至 左下 以同样的方式再层叠一组方块。