flutter - 将 flutter Row 中的元素缩放为具有相同的纵横比

Question

我想连续显示一个元素列表。问题是它没有正确缩放。如果我有六个元素，它看起来不错，但如果列表只包含四个元素，它看起来就不太好。谁能告诉我我做错了什么？

代码:

    Container(
                height: 100,
                margin: marginMediumHorizontal,
                decoration: decorationLight,
                alignment: Alignment.center,
                child: Row(
                  children: <Widget>[
                    ...model.gridListItems.map(
                      (element) => Expanded(
                        child: Container(
                          margin: EdgeInsets.symmetric(horizontal: 5, vertical: 5),
                          decoration: decorationDark,
                          padding: EdgeInsets.all(5),
                          child: Image(
                            color: lightGrayLimeGreen,
                            image: AssetImage(element['icon']),
                            fit: BoxFit.contain,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),

非常感谢您的帮助。

Answer 1

使用 Flexible 小部件而不是 Expanded 并将每个小部件指定为 flex : 1 它会自己完成任务。

Container(
            height: 100,
            margin: marginMediumHorizontal,
            decoration: decorationLight,
            alignment: Alignment.center,
            child: Row(
              children: <Widget>[
                ...model.gridListItems.map(
                  (element) => Flexible(
                    flex : 1,
                    child: Container(
                      margin: EdgeInsets.symmetric(horizontal: 5, vertical: 5),
                      decoration: decorationDark,
                      padding: EdgeInsets.all(5),
                      child: Image(
                        color: lightGrayLimeGreen,
                        image: AssetImage(element['icon']),
                        fit: BoxFit.contain,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),