如何使用静态填充并排创建 3 个响应式 AspectRatios

问题描述

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

[
{age: " not integer "},{fruits_id: 1,err: "amount not int"},{fruits_id: 3,err: "amount not int"}
] 

解决方法

感谢 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,right: 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,],);
  }