在flutter Row中的元素具有相同的纵横比。

Question

我想在一行中显示一个元素列表。问题是它的缩放不正确。如果我有6个元素，它看起来很好，但如果列表中只包含4个元素，它看起来就不好了。谁能告诉我我做错了什么？

代码。

    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,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),