如何并排创建 3 个具有静态填充的响应式纵横比

Question

我想创建如下图所示的内容，我遇到的问题是我不知道我应该为父容器使用哪个宽高比以使其在宽度更改时完美响应。我尝试了很多纵横比，比如 1200.0 / 451.0，但它会溢出（取决于 window 宽度，有时是 2px，有时是 3.7px）。当我使用 1080.0 / 403.0 之类的东西时，它变得比全宽更小。

  Widget buildWidget() {
    return Container(
      child: AspectRatio(
        aspectRatio: 1200.0 / 451.0,
        child: Row(
          children: [
            AspectRatio(
              aspectRatio: 16.0 / 9.0,
              child: Container(
                decoration: BoxDecoration(
                  color: AppColors.black,
                  borderRadius:
                  BorderRadius.circular(context.cornerRadiusNormal),
                ),
              ),
            ),
            SizedBox(width: context.basePadding),
            Column(
              children: [
                Expanded(
                  child: AspectRatio(
                    aspectRatio: 16.0 / 9.0,
                    child: Container(
                      decoration: BoxDecoration(
                        color: AppColors.black,
                        borderRadius: BorderRadius.circular(
                            context.cornerRadiusNormal),
                      ),
                    ),
                  ),
                ),
                SizedBox(height: context.basePadding),
                Expanded(
                  child: AspectRatio(
                    aspectRatio: 16.0 / 9.0,
                    child: Container(
                      decoration: BoxDecoration(
                        color: AppColors.black,
                        borderRadius: BorderRadius.circular(
                            context.cornerRadiusNormal),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  });
  }

Answer 1

多亏了 pskink，在将宽高比设置为 24 / 9 后它可以完美地工作，对于填充，我在下面的代码中这样做：

  Widget buildWidget() {
    return Container(
      child: AspectRatio(
        aspectRatio: 24 / 9,
        child: Row(
          children: [
            AspectRatio(
              aspectRatio: 16.0 / 9.0,
              child: Padding(
                padding: EdgeInsets.only(
                  left: context.basePadding / 2,
                  top: context.basePadding / 2,
                  right: context.basePadding,
                  bottom: context.basePadding / 2,
                ),
                child: AspectRatio(
                  aspectRatio: 16.0 / 9.0,
                  child: Container(
                    decoration: BoxDecoration(
                      color: AppColors.black,
                      borderRadius:
                      BorderRadius.circular(context.cornerRadiusNormal),
                    ),
                  ),
                ),
              ),
            ),
            Column(
              children: [
                Expanded(
                  child: AspectRatio(
                    aspectRatio: 16.0 / 9.0,
                    child: Padding(
                      padding: EdgeInsets.only(
                        left: context.basePadding,
                        top: context.basePadding / 2,
                        right: context.basePadding / 2,
                        bottom: context.basePadding / 2,
                      ),
                      child: AspectRatio(
                        aspectRatio: 16.0 / 9.0,
                        child: Container(
                          decoration: BoxDecoration(
                            color: AppColors.black,
                            borderRadius:
                            BorderRadius.circular(context.cornerRadiusNormal),
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
                Expanded(
                  child: AspectRatio(
                    aspectRatio: 16.0 / 9.0,
                    child: Padding(
                      padding: EdgeInsets.only(
                        left: context.basePadding,
                        top: context.basePadding / 2,
                        right: context.basePadding / 2,
                        bottom: context.basePadding / 2,
                      ),
                      child: AspectRatio(
                        aspectRatio: 16.0 / 9.0,
                        child: Container(
                          decoration: BoxDecoration(
                            color: AppColors.black,
                            borderRadius:
                            BorderRadius.circular(context.cornerRadiusNormal),
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

如何并排创建 3 个具有静态填充的响应式纵横比

How to create 3 responsive AspectRatios with static padding side by side

widget

aspect-ratio

dart

flutter